/* Base layout */
* {
  box-sizing: border-box;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.root-placeholder {
}

:root {
  --page-bg: #ffffff;
  --text: #243b2b;
  --title: #1b3b31;
  --text-dark: #213b32;

  --sidebar-bg: #1f4b3f;
  --brand-bg: #2f6a56;
  --active-color: #fff;

  --white: #ffffff;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-12: rgba(255, 255, 255, 0.12);

  --black: #000;

  --border: #e6ece6;
  --deepBorder: #c8cecb;
  --muted: #6b7f79;
  --toggleDeep: #4b8978;
  --toggleLight: #8aa29b;

  --green: #2f8a57;
  --green-bg: #e7f6ee;
  --blue: #1777a8;
  --blue-dark: #0b6088;
  --blue-bg: #edf6fb;
  --teal: #1aa37a;
  --teal-bg: #eaf6f4;
  --red: #c84a44;
  --red-bg: #fdecea;

  --accent: #2f90e6;
  /* Form / page specific colors (use variables instead of literals) */
  --company-card-border: #7d938d;
  --heading: #1b6b5e;
  --input-border: #6c807a;
  --input-bg: #ffffff;
  --btn-reset-bg: #6b7f79;
  --heading-underline: rgba(47, 144, 230, 0.15);
  --nav-subitem-hover: rgba(255, 255, 255, 0.03);

  /* Location Log Management page specific colors */
  --nav-tab-color: #2e4336;
  --nav-tab-active-color: #1f4b3f;
  --badge-bg: #a7dfd2;
  --badge-icon-color: #1f4b3f;
  --empty-title-color: #111111;
  --empty-desc-color: #333333;
  --shadow-color: rgba(0, 0, 0, 0.04);

  /* Login page theme variables */
  --login-card-bg: rgba(255, 255, 255, 0.43);
  --login-card-border: rgba(255, 255, 255, 0.55);
  --login-card-shadow:
    0 16px 40px rgba(19, 65, 57, 0.22), 0 2px 10px rgba(0, 0, 0, 0.08);
  --login-input-bg: #ffffff;
  --login-input-border: rgba(0, 0, 0, 0.08);
  --login-input-text: #243b2b;
  --login-input-placeholder: #718096;
  --login-input-icon: #2d3748;
  --login-btn-bg: #1f4b3f;
  --login-btn-hover: #173b32;
  --login-btn-active: #13332a;
  --login-btn-text: #ffffff;
  --login-link-color: #1f4b3f;
  --login-link-hover: #13332a;
  --login-error-color: #d32f2f;
  --login-banner-overlay: rgba(255, 255, 255, 0.22);
  --active-haschild: #83c5b3;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --sidebar-bg: #0f2922;
  --active-color: #74c8b2;

  --page-bg: #121212;
  --text: #e0e0e0;
  --title: #ffffff;
  --text-dark: #f0f0f0;
  --white: #1e1e1e;
  --border: #2d2d2d;
  --muted: #a0a0a0;
  --green-bg: #1b382b;
  --blue-bg: #122c3a;
  --teal-bg: #14352f;
  --red-bg: #3a1c1a;
  /* Dark mode overrides for form colors */
  --company-card-border: #274b41;
  --heading: #99cbb7;
  --input-border: #3a5249;
  --input-bg: #111111;
  --btn-reset-bg: #4f655d;
  --heading-underline: rgba(47, 144, 230, 0.08);
  --nav-subitem-hover: rgba(255, 255, 255, 0.06);

  /* Dark mode overrides for Location Log Management */
  --nav-tab-color: #e0e0e0;
  --nav-tab-active-color: #ffffff;
  --topnav-active-color: #2ec09a;
  --badge-bg: #1d4d42;
  --badge-icon-color: #7bdac6;
  --empty-title-color: #ffffff;
  --empty-desc-color: #cccccc;
  --shadow-color: rgba(0, 0, 0, 0.2);

  /* Dark mode overrides for login page */
  --login-card-bg: rgba(18, 36, 29, 0.72);
  --login-card-border: rgba(255, 255, 255, 0.16);
  --login-card-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
  --login-input-bg: rgba(26, 46, 38, 0.9);
  --login-input-border: rgba(255, 255, 255, 0.16);
  --login-input-text: #ffffff;
  --login-input-placeholder: #a3b8af;
  --login-input-icon: #7bdac6;
  --login-btn-bg: #256a56;
  --login-btn-hover: #2e7d66;
  --login-btn-active: #1d5747;
  --login-btn-text: #ffffff;
  --login-link-color: #74c8b2;
  --login-link-hover: #a1ebd6;
  --login-error-color: #ff6b6b;
  --login-banner-overlay: rgba(10, 22, 17, 0.52);
}

/* =========================================================
   GLOBAL DATEPICKER PREVIOUS / NEXT ARROWS
   Works with Semantic UI datepicker structure
   ========================================================= */

/* Common datepicker navigation cells */
.ui-datepicker th.prev,
.ui-datepicker th.next,
.daterangepicker th.prev,
.daterangepicker th.next,
.datepicker th.prev,
.datepicker th.next {
  position: relative !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  cursor: pointer !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Hide Semantic UI icon font */
.ui-datepicker th.prev i,
.ui-datepicker th.next i,
.daterangepicker th.prev i,
.daterangepicker th.next i,
.datepicker th.prev i,
.datepicker th.next i {
  display: none !important;
}

/* Create arrow icon */
.ui-datepicker th.prev::before,
.ui-datepicker th.next::before,
.daterangepicker th.prev::before,
.daterangepicker th.next::before,
.datepicker th.prev::before,
.datepicker th.next::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;

  background-color: currentColor !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;

  -webkit-mask-position: center !important;
  mask-position: center !important;

  -webkit-mask-size: contain !important;
  mask-size: contain !important;

  vertical-align: middle !important;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease !important;
}

/* Previous arrow SVG */
.ui-datepicker th.prev::before,
.daterangepicker th.prev::before,
.datepicker th.prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 4.5 8 12l7.5 7.5-1.5 1.5L5 12l9-9z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 4.5 8 12l7.5 7.5-1.5 1.5L5 12l9-9z'/%3E%3C/svg%3E") !important;
}

/* Next arrow SVG */
.ui-datepicker th.next::before,
.daterangepicker th.next::before,
.datepicker th.next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m8.5 4.5 1.5-1.5 9 9-9 9-1.5-1.5 7.5-7.5z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m8.5 4.5 1.5-1.5 9 9-9 9-1.5-1.5 7.5-7.5z'/%3E%3C/svg%3E") !important;
}

/* Hover effect */
.ui-datepicker th.prev:hover::before,
.ui-datepicker th.next:hover::before,
.daterangepicker th.prev:hover::before,
.daterangepicker th.next:hover::before,
.datepicker th.prev:hover::before,
.datepicker th.next:hover::before {
  transform: scale(1.15) !important;
  opacity: 0.7 !important;
}

/* Disabled navigation */
.ui-datepicker th.prev.disabled,
.ui-datepicker th.next.disabled,
.daterangepicker th.prev.disabled,
.daterangepicker th.next.disabled,
.datepicker th.prev.disabled,
.datepicker th.next.disabled {
  cursor: not-allowed !important;
  opacity: 0.35 !important;
}

/* Dark theme */
html[data-theme="dark"] .ui-datepicker th.prev,
html[data-theme="dark"] .ui-datepicker th.next,
html[data-theme="dark"] .daterangepicker th.prev,
html[data-theme="dark"] .daterangepicker th.next,
html[data-theme="dark"] .datepicker th.prev,
html[data-theme="dark"] .datepicker th.next {
  color: #ffffff !important;
}

/* Light theme */
html[data-theme="light"] .ui-datepicker th.prev,
html[data-theme="light"] .ui-datepicker th.next,
html[data-theme="light"] .daterangepicker th.prev,
html[data-theme="light"] .daterangepicker th.next,
html[data-theme="light"] .datepicker th.prev,
html[data-theme="light"] .datepicker th.next {
  color: #222222 !important;
}

/* =========================================================
   GLOBAL MODAL STYLE
   ========================================================= */
* {
  scrollbar-width: thin;
  scrollbar-color: #306a56 #f0f0f000 !important;
}
*::-webkit-scrollbar-thumb {
  background-color: #1f4b3f;
  border-radius: 20px;
  border: 3px solid #f0f0f0;
}
*::-webkit-scrollbar-track {
  background: var(--white);
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background-color: #1f4b3f;
  border: 3px solid #f0f0f0;
}
html[data-theme="dark"] *::-webkit-scrollbar-track {
  background: var(--page-bg);
}

body.modal-open {
  overflow: hidden;
}

.ui.modal {
  display: none;
  visibility: hidden;
  opacity: 0;

  position: fixed !important;
  top: 50% !important;
  left: 50% !important;

  z-index: 1001 !important;

  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 30px);

  overflow-y: auto;

  transform: translate(-50%, -50%) scale(0.96);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.ui.modal.visible,
.ui.modal.active,
.ui.modal.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  transform: translate(-50%, -50%) scale(1);
}

.global-modal-dimmer {
  display: none;

  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  z-index: 1000;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.global-modal-dimmer.visible,
.global-modal-dimmer.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Dark theme */
html[data-theme="dark"] .ui.modal {
  background: #121212;
  color: #ffffff;
}

/* Light theme */
html[data-theme="light"] .ui.modal {
  background: #ffffff;
  color: #222222;
}

body.modal-open {
  overflow: hidden;
}

.ui.modal {
  display: none !important;
  visibility: hidden;
  opacity: 0;

  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1001 !important;

  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 30px);

  overflow-y: auto;
  transform: translate(-50%, -50%);
}

.ui.modal.visible,
.ui.modal.active,
.ui.modal.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.global-modal-dimmer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
}

.global-modal-dimmer.visible,
.global-modal-dimmer.active {
  display: block;
}

body.modal-open {
  overflow: hidden;
}

.ui.modal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1001 !important;

  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 30px);

  overflow-y: auto;
  transform: translate(-50%, -50%) scale(0.96);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.ui.modal.visible,
.ui.modal.active,
.ui.modal.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1);
}

.global-modal-dimmer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  position: fixed;
  inset: 0;
  z-index: 1000;

  background: rgba(0, 0, 0, 0.55);
}

.global-modal-dimmer.visible,
.global-modal-dimmer.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

select option:hover {
  background-color: #2f6a56 !important;
  color: white !important;
}

.custom-select option:checked {
  background-color: #2f6a56 !important;
  color: white !important;
}

.custom-select option:hover {
  background-color: #2f6a56 !important;
  color: white !important;
}

/* Opt both the select AND its dropdown picker into styleable mode */
select,
select::picker(select) {
  appearance: base-select;
}

/* Now option:hover actually works in Chrome */
select option:hover {
  background-color: var(--brand-bg) !important;
  color: var(--white) !important;
}
html[data-theme="dark"] .custom-select option,
html[data-theme="dark"] select option {
  color: #fff !important;
}
/* Style the currently selected option too */
/* select option:checked {
  background-color: var(--brand-bg) !important;
  color: var(--white) !important;
  font-weight: 600;
} */

/* Optional: style the dropdown panel itself */
select::picker(select) {
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  overflow-x: hidden;
}

.app {
  display: flex;
  min-height: 100vh;
}

.d-none {
  display: none;
}

/* Sidebar */
.sidebar {
  min-width: 5vw;
}

.open-sidebar {
  width: 20vw;
  background: var(--sidebar-bg);
  color: var(--white);
  padding: 1.104vh 0.964vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  transition: all ease 0.3s;
  position: relative;
  z-index: 2;
}

.open-sidebar.close {
  width: 0;
  transition: all ease 0.3s;
  padding: 0;
  overflow: hidden;
  z-index: 0;
}

.close-sidebar {
  width: 5vw;
  background: var(--sidebar-bg);
  color: var(--white);
  padding: 1.104vh 0.964vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  transition: all ease 0.3s;
  position: absolute;
  top: 0;
  left: 0;
}

.close-sidebar .avatar {
  cursor: pointer;
}

.close-sidebar .sidebar-open {
  width: 1.5rem;
  height: 1.2rem;
  cursor: pointer;
}

.close-sidebar .brand {
  justify-content: center;
}

.close-sidebar .brand .avatar:hover > span {
  display: none;
  transition: all ease-in-out 0.6s;
}

.close-sidebar .brand .avatar > img {
  display: none;
  transition: all ease-in-out 0.6s;
}

.close-sidebar .brand .avatar:hover > img {
  display: block;
  transition: all ease-in-out 0.6s;
}

.ui.menu:not(.vertical) .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.ui.menu .item {
  position: relative;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: 0 0;
  padding: 1.14285714em;
  text-transform: none;
  color: #212121;
  font-weight: 400;
  -webkit-transition:
    background 0.1s ease,
    box-shadow 0.1s ease,
    color 0.1s ease;
  transition:
    background 0.1s ease,
    box-shadow 0.1s ease,
    color 0.1s ease;
}
.selectize-dropdown .active {
  background-color: var(--brand-bg) !important;
  color: #ffffff !important;
}
.selectize-dropdown .selected {
  background-color: var(--brand-bg) !important;
  color: #ffffff !important;
}
.ui.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1rem 0;
  font-family: Roboto, Arial, sans-serif;
  background: #fff;
  font-weight: 400;
  border: 1px solid rgba(34, 36, 38, 0.15);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  min-height: 3.28571429em;
}

.ui.pagination.menu {
  margin: 0.2rem 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.ui.pagination.menu .item {
  min-width: 3em;
  text-align: center;
}

.ui.menu .item.disabled,
.ui.menu .item.disabled:hover {
  cursor: default;
  background-color: transparent !important;
  color: rgba(40, 40, 40, 0.3);
}

.ui.menu > .item:first-child {
  border-radius: 4px 0 0 4px;
}

.close-sidebar .nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.close-sidebar .nav::-webkit-scrollbar {
  width: 0 !important;
}

.close-sidebar .nav-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.close-sidebar .nav-item {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease;
}

.close-sidebar .nav-item > span,
.close-sidebar .nav-item .caret,
.close-sidebar .nav-item .sidebar-hasChild-arrow {
  display: none !important;
}

.close-sidebar .subnav {
  display: none !important;
  max-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
  visibility: hidden !important;
}

.close-sidebar .nav-item.active {
  background: var(--active-color) !important;
}

.close-sidebar .nav-item.active .sidebar-icons,
.close-sidebar .nav-group .nav-item.active .sidebar-icons,
.close-sidebar .nav-group .nav-item.has-child.active .sidebar-icons {
  background-color: var(--brand-bg) !important;
}

.close-sidebar .nav-item:not(.active):hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.close-sidebar .sidebar-footer {
  justify-content: center;
}

.close-sidebar .sidebar-footer .logout {
  height: 3rem;
  width: 3rem;
}

.brand {
  display: flex;
  gap: 0.879vw;
  align-items: center;
  border-bottom: 1px solid var(--white);
  padding-bottom: 1.2vh;
}

.avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 0.439vw;
  /* background: var(--active-color); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--sidebar-bg);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: calc(100% - 3rem);
}

.brand-text .name-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-text .name-container .name {
  font-weight: 700;
  font-size: 1.5rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 5px;
  color: var(--white-90);
}

.brand-text .name-container .sidebar-close {
  width: 1.5rem;
  height: 1.2rem;
  cursor: pointer;
}

.brand-text .last-login {
  font-size: 0.879vw;
  opacity: 0.9;
  color: var(--white-90);
}

.nav {
  margin-top: 1.444vh;
  display: flex;
  flex-direction: column;
  gap: 0.586vw;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  width: 0 !important;
}

.nav-item {
  display: flex;
  gap: 0.732vw;
  align-items: center;
  padding: 1.302vh 0.732vw;
  border-radius: 0.439vw;
  color: var(--white-90);
  cursor: pointer;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

.nav-item i {
  width: 1.319vw;
  text-align: center;
}

.nav-item.active {
  background: var(--active-color);
}

.nav-item.active > i {
  color: var(--sidebar-bg);
}

.nav-item.active > span {
  color: var(--sidebar-bg);
}

/* Submenu styles */
.subnav {
  display: none;
  display: block;
  /* keep in flow; hidden via height */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
  /* padding: 0.5rem; */
}

.nav-item.has-child {
  margin: 0;
}

.nav-item.has-child.open {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* .nav-group:hover {
  background-color: var(--brand-bg);
} */

.nav-group > .nav-item.has-child.active.open {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.nav-group > .nav-item.has-child.active.open > svg > path {
  fill: #fff;
}

.nav-item.has-child.active > svg > path {
  fill: var(--sidebar-bg);
}

/* In open-sidebar: parent menu header never shows as active pill */
.open-sidebar .nav-item.has-child,
.open-sidebar .nav-item.has-child.active {
  background: transparent;
  color: var(--white-90);
}

.open-sidebar .nav-item.has-child > span,
.open-sidebar .nav-item.has-child.active > span {
  color: var(--white-90) !important;
}

.open-sidebar .nav-item.has-child .sidebar-icons,
.open-sidebar .nav-item.has-child.active .sidebar-icons {
  background-color: #fff !important;
}

.open-sidebar .nav-item.has-child .caret,
.open-sidebar .nav-item.has-child.active .caret {
  fill: #fff !important;
  color: #fff !important;
}

.open-sidebar .nav-item.has-child.open,
.open-sidebar .nav-item.has-child.active.open {
  background: var(--sidebar-bg) !important;
  color: #fff !important;
}

.open-sidebar .nav-item.has-child.open > span,
.open-sidebar .nav-item.has-child.active.open > span {
  color: #fff !important;
}

.open-sidebar .nav-item.has-child.open .sidebar-icons,
.open-sidebar .nav-item.has-child.active.open .sidebar-icons {
  background-color: #fff !important;
}

.open-sidebar .nav-item.has-child.open .caret,
.open-sidebar .nav-item.has-child.active.open .caret {
  fill: #fff !important;
  color: #fff !important;
}

.nav-group:has(> .nav-item.has-child.open) > .subnav {
  /* background-color: var(--brand-bg); */
  padding: 0.5rem;
  border-bottom-left-radius: 0.439vw;
  border-bottom-right-radius: 0.439vw;
  padding-left: 2.1rem;
}

.nav .nav-subitem {
  display: block;
  padding: 0.6rem 0.732vw;
  color: var(--white-90);
  text-decoration: none;
  font-size: 1.05rem;
}

.nav .nav-subitem:hover {
  background: var(--nav-subitem-hover);
}

.nav-item.has-child .caret {
  margin-left: auto;
  font-size: 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  transition: transform 0.22s ease;
}

.nav-item.has-child.open .caret {
  transform: rotate(180deg);
}

.nav-item.has-child.open + .subnav {
  max-height: 100%;
  /* large enough to show all items */
}

.nav-item.has-child.open {
  background: var(--sidebar-bg);
  position: sticky;
  top: 0;
  border-bottom: 1px solid #486960;
}

/* html[data-theme="dark"] .nav-item.has-child.open {
  background-color: var(--active-color);
} */

html[data-theme="dark"] .create-btn {
  color: var(--text);
}

html[data-theme="dark"] .ui.selection.dropdown {
  background: var(--input-bg);
  color: var(--text);
}

.nav-item.has-child.open > i {
  color: var(--sidebar-bg);
}

.nav-item.has-child.open > span {
  color: #fff;
}

.nav .nav-subitem.active {
  background: var(--active-color);
  color: var(--sidebar-bg);
  border-radius: 5px;
}

/* html[data-theme="dark"] .nav .nav-subitem.active {
  color: var(--text);
} */

.sidebar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.144vh;
  border-top: 1px solid var(--white);
  padding-top: 1.2vh;
}

.change-password {
  color: var(--white-90);
  text-decoration: none;
  font-size: 1rem;
}

.sidebar-footer-right {
  display: flex;
  align-items: center;
  gap: 0.98vw;
}

.logout {
  background: var(--white);
  border: 0.073217vw solid var(--white);
  color: var(--sidebar-bg);
  padding: 0.781vh 0.732vw;
  border-radius: 0.439vw;
  cursor: pointer;
  font-size: 1.1rem;
}

html[data-theme="dark"] .logout {
  background: var(--active-color);
  border-color: var(--active-color);
  color: var(--sidebar-bg);
}

html[data-theme="dark"] .change-password {
  color: var(--white-90);
}

.theme {
  background: transparent;
  border: none;
  color: var(--white);
  padding: 0.5rem;
  border-radius: 0.439vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s,
    transform 0.2s;
}

html[data-theme="dark"] .theme {
  color: var(--white-90);
}

.theme:hover {
  background-color: var(--white-12);
  transform: scale(1.05);
}

.theme:active {
  transform: scale(0.95);
}

.theme svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  display: none;
}

/* Toggle visibility of the SVG corresponding to the active mode of the button */
.theme[data-mode="system"] svg[data-mode="system"],
.theme[data-mode="light"] svg[data-mode="light"],
.theme[data-mode="dark"] svg[data-mode="dark"] {
  display: block;
}

/* Theme button using Font Awesome icons (fallback to <i> when SVGs get injected into) */
.theme .icon {
  display: none;
  font-size: 1.1rem;
}

.theme[data-mode="system"] .icon.system {
  display: inline-block;
}

.theme[data-mode="light"] .icon.light {
  display: inline-block;
}

.theme[data-mode="dark"] .icon.dark {
  display: inline-block;
}

/* Main content */
.screen-container {
  display: flex;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  /* padding: 3.646vh 2.636vw; */
  padding: 2.246vh 1.036vw;
  overflow: hidden;
}

[ui-view="main"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none !important;
  /* Standard: Chrome 121+, Firefox, Safari 18+ */
  -ms-overflow-style: none !important;
  /* IE and legacy Edge */
}

[ui-view="main"]::-webkit-scrollbar {
  display: none !important;
  /* Older WebKit browsers */
  width: 0 !important;
  height: 0 !important;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.344vh;
  flex-shrink: 0 !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page-bg);
}

.title {
  margin: 0;
  color: var(--title);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.top-actions {
  display: flex;
  gap: 0.879vw;
  align-items: center;
  border-radius: 0.586vw;
  border: 0.073217vw solid var(--border);
}

.top-actions .btn {
  font-size: 1rem;
}
html[data-theme="dark"] .top-actions .btn {
  font-size: 1rem;
  color: var(--text);
}
.date-box {
  background: var(--white);
  /* padding: 1.042vh 0.879vw;
  border-radius: 0.586vw;
  border: 0.073217vw solid var(--border); */
  color: var(--text-dark);
  font-size: 1.3rem;
  border: none;
  padding-left: 0.879vw;
}

.btn {
  background: var(--brand-bg);
  color: var(--white);
  border: none;
  padding: 1.042vh 0.879vw;
  border-radius: 0.586vw;
  cursor: pointer;
}

.top-header-right {
  display: flex;
  gap: 0.5vw;
  align-items: center;
}

/* Stat cards */
.stats {
  display: flex;
  gap: 1.171vw;
  margin-bottom: 5vh;
}

.stat-card {
  flex: 1;
  background: var(--white);
  padding: 1.562vh 1.025vw;
  border-radius: 0.732vw;
  display: flex;
  gap: 0.879vw;
  align-items: center;
  border: 0.073217vw solid var(--border);
}

.stat-card .icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.586vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.319vw;
  padding: 0.6rem;
}

.stat-card .meta .label {
  font-size: 0.952vw;
  color: var(--muted);
}

.stat-card .meta .value {
  font-weight: 700;
  font-size: 1.319vw;
  color: var(--text-dark);
}

.stat-card.green .icon {
  background: var(--green-bg);
  color: var(--green);
}

.stat-card.blue .icon {
  background: var(--blue-bg);
  color: var(--blue);
}

.stat-card.teal .icon {
  background: var(--teal-bg);
  color: var(--teal);
}

.stat-card.red .icon {
  background: var(--red-bg);
  color: var(--red);
}

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.611vw;
  width: 100%;
  min-height: 50vh;
}

.chart-card {
  background: var(--white);
  padding: 2.344vh;
  border-radius: 0.732vw;
  /* border: 0.21965vw solid var(--accent); */
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-inner {
  width: 100%;
  max-width: 38.055vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0 34%, var(--red) 34% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.donut::after {
  content: "";
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: var(--white);
  position: absolute;
}

.donut-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.586vw;
  z-index: 1;
}

.donut-center .present {
  color: var(--green);
  font-weight: 700;
  text-align: center;
}

.donut-center .present span {
  display: block;
  color: var(--text-dark);
  font-size: 1.319vw;
}

.donut-center .absent {
  color: var(--red);
  font-weight: 700;
  text-align: center;
}

.donut-center .absent span {
  display: block;
  color: var(--text-dark);
  font-size: 1.319vw;
}

.table-card {
  background: var(--white);
  border-radius: 0.732vw;
  /* border: 0.073217vw solid var(--border); */
  padding: 2.344vh;
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;
  overflow: hidden;
}

.table-card.dashboard {
  padding-right: 0 !important;
}

html[data-theme="light"] .table-card.dashboard {
  padding-right: 2.344vh !important;
}

.section-title {
  margin: 0 0 1.562vh 0;
  color: var(--brand-bg);
  flex-shrink: 0;
}

.table-container.ration-distribution-table {
  max-height: 70vh;
}

.img-hover-zoom.worker-img img {
  width: 100% !important;
  height: auto !important;
}

.table-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--brand-bg);
  border-radius: 15px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.table-container::-webkit-scrollbar {
  width: 3px;
}

.table-container.user-management {
  min-height: 80vh;
  max-height: 80vh;
}

.table-container.privilege-container {
  max-height: 55vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.table-container.privilege-container.user-type {
  max-height: 60vh;
  min-height: 60vh;
}

.table-container.privilege-container::-webkit-scrollbar{
  display: none;
}

.section-table {
  width: 100%;
  border-collapse: collapse;
}

.section-table.privilege-table {
  table-layout: fixed;
  width: 100%;
}

.section-table.privilege-table th:first-child,
.section-table.privilege-table td:first-child {
  width: 40%;
}

.section-table.privilege-table th:not(:first-child),
.section-table.privilege-table td:not(:first-child) {
  width: 15%;
  text-align: center;
}

.section-table.privilege-table tr.parent-privilege-row,
.section-table.privilege-table tr.parent-privilege-row td {
  background-color: #d2e2de !important;
  color: #1b3b31;
}

html[data-theme="dark"] .section-table.privilege-table tr.parent-privilege-row,
html[data-theme="dark"]
  .section-table.privilege-table
  tr.parent-privilege-row
  td {
  background-color: #3a3f3d !important;
  color: var(--text);
}

.section-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* font-size: 1.2rem; */
  font-size: 0.9rem;
  background: var(--brand-bg);
  color: var(--white);
  /* padding: 1.302vh 0.732vw; */
  padding: 0.802vh 0.732vw;
  text-align: left;
  z-index: 99 !important;
}

.section-table thead th:first-child {
  background: var(--brand-bg);
  color: var(--white);
  padding: 1.302vh 0.732vw;
  border-top-left-radius: 0.439vw;
  text-align: left;
}

html[data-theme="dark"] .section-table thead th {
  color: var(--white-90);
}

.section-table thead th:last-child {
  background: var(--brand-bg);
  color: var(--white);
  padding: 1.302vh 0.732vw;
  border-top-right-radius: 0.439vw;
  text-align: left;
}

.section-table tbody td {
  /* padding: 1.562vh;
  border-bottom: 0.073217vw dashed var(--border);
  font-size: 1.1rem; */
  padding: 0.762vh 1.262vh;
  border-bottom: 0.073217vw dashed var(--border);
  font-size: 0.9rem;
}

html[data-theme="dark"] .section-table tbody td {
  color: var(--empty-title-color);
}

table label {
  font-size: 1rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.even-row {
  background-color: transparent !important;
}

@media (max-width: 73.217vw) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .main {
    padding: 2.344vh;
  }

  .stats {
    flex-direction: column;
  }

  .table-card {
    height: auto;
    max-height: 400px;
  }
}

/* Page-specific form styles moved from form.html */
.company-card {
  background: var(--white);
  max-height: 90vh;
}

.form-section {
  margin-bottom: 1.25rem;
}

.form-section h3 {
  margin: 0 0 0.75rem 0;
  color: var(--heading);
  text-decoration: underline;
  text-decoration-color: var(--heading-underline);
  font-size: 1.5rem;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.fields .full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea,
select,
.custom-select,
.selectize-control.single .selectize-input,
.selectize-dropdown.single,
.selectize-dropdown.multi {
  width: 100%;
  padding: 0.5rem !important;
  border-radius: 4px;
  border: 1px solid var(--input-border) !important;
  background: var(--input-bg);
  font-size: 0.95rem !important;
}
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] {
  color: #fff;
}

.selectize-dropdown {
  z-index: 999;
}
html[data-theme="dark"] .tiny.images {
  opacity: 0.5;
}
html[data-theme="dark"] .tiny.images > img {
  filter: brightness(0) invert(1);
}
.tiny.images > img {
  height: 5rem !important;
}
html[data-theme="dark"] .selectize-input,
html[data-theme="dark"] .selectize-dropdown.single,
html[data-theme="dark"] .selectize-dropdown.multi {
  background: var(--input-bg);
  color: var(--white-90);
  outline: none;
  border: 1px solid var(--input-border) !important;
}
html[data-theme="dark"] .custom-empty-subtitle a {
  color: green;
}
html[data-theme="dark"] .sample-view {
  color: green !important;
}
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] select,
html[data-theme="dark"] .custom-select {
  color: var(--white-90);
  outline: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.btn-reset {
  background: var(--btn-reset-bg);
  color: var(--white);
  border: none;
  padding: 0.8rem 3rem;
  border-radius: 6px;
  font-size: 1.2rem;
}

.btn-update {
  background: var(--green);
  color: var(--white);
  border: none;
  padding: 0.8rem 3rem;
  border-radius: 6px;
  font-size: 1.2rem;
}

@media (max-width: 900px) {
  .fields {
    grid-template-columns: 1fr;
  }

  .open-sidebar.close {
    display: none;
  }
}

/* Cutoff times row: 4 columns on wide screens, stack on small screens */
.cutoffs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.cutoffs > div label {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.cutoffs input[type="time"] {
  width: 100%;
  padding: 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  font-size: 1.15rem;
}

.input-checkbox {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-top: 1.5rem;
  gap: 0.5vw;
}

.input-checkbox > label {
  color: var(--text);
}

.full .select-usermanagement {
  width: 100%;
}

.full .select-usermanagement.ui.selection.dropdown.active,
.full .select-usermanagement.ui.selection.dropdown.visible {
  position: relative;
  z-index: 999;
}

.company-form {
  max-height: 80vh;
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid var(--company-card-border);
  border-radius: 10px;
}

.company-form::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .cutoffs {
    grid-template-columns: 1fr;
  }
}

/* Location Log Management Page Styles */
.header-nav-tabs {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}

.nav-tab-item {
  color: var(--nav-tab-color);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition:
    border-color 0.2s,
    color 0.2s;
}

.nav-tab-item:hover {
  color: var(--nav-tab-active-color);
}

.nav-tab-item.active {
  color: var(--topnav-active-color);
  font-weight: 700;
  border-bottom: 2.5px solid var(--topnav-active-color);
}

html[data-theme="dark"] .nav-tab-item.active {
  color: var(--topnav-active-color);
}

.location-management-main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.empty-state-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 6rem 1rem;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 580px;
}

.location-icon-badge {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--badge-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px var(--shadow-color);
}

html[data-theme="dark"] .location-icon-badge {
  background: var(--active-color);
}

.location-icon-badge svg {
  stroke: var(--badge-icon-color);
}

.location-icon-badge > img {
  height: 50px;
}

.empty-state-title {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--empty-title-color);
  margin: 0 0 1.1rem 0;
  letter-spacing: -0.01em;
}

.empty-state-desc {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--empty-desc-color);
  margin: 0 0 1.25rem 0;
}

.empty-state-action {
  font-size: 1.05rem;
  color: var(--empty-desc-color);
  margin: 0;
}

.empty-state-action .action-link {
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration: underline;
  letter-spacing: 0.5px;
}

.empty-state-action .action-link:hover {
  color: var(--sidebar-bg);
}

.stat-card.green {
  border: 0.073217vw solid var(--green);
  border-left: 5px solid var(--green);
}

.stat-card.green .icon svg {
  fill: var(--green);
}

.stat-card.blue {
  border: 0.073217vw solid var(--blue);
  border-left: 5px solid var(--blue);
}

.stat-card.blue {
  border: 0.073217vw solid var(--blue);
  border-left: 5px solid var(--blue);
}

.stat-card.blue .icon svg {
  fill: var(--blue);
}

.stat-card.red {
  border: 0.073217vw solid var(--red);
  border-left: 5px solid var(--red);
}

.stat-card.red {
  border: 0.073217vw solid var(--red);
  border-left: 5px solid var(--red);
}

.stat-card.red .icon svg {
  fill: var(--red);
}

.stat-card.teal {
  border: 0.073217vw solid var(--teal);
  border-left: 5px solid var(--teal);
}

.stat-card.teal {
  border: 0.073217vw solid var(--teal);
  border-left: 5px solid var(--teal);
}

.stat-card.teal .icon svg {
  fill: var(--teal);
}

.section-table {
  border-collapse: separate;
  border-spacing: 0;
}

#attendance-chart {
  background-color: var(--page-bg) !important;
  border: none !important;
}

.card-info-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.card-info-wrapper .card-info {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.card-info p {
  margin: 0;
}

.search-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.search-field .input-field input {
  border: none !important;
  outline: none !important;
}

.input-field {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--deepBorder);
  padding: 0.2rem 1rem;
  border-radius: 10px;
  min-width: 40%;
}

.search-field .input-field.work-batch {
  width: 100%;
}

html[data-theme="dark"] .selectize-input,
html[data-theme="dark"]
  .selectize-control.single
  .selectize-input.input-active {
  border: 1px solid var(--deepBorder);
  background: #111111;
}

html[data-theme="dark"]
  .selectize-control
  .custom-selectize-item
  .custom-selectize-header {
  color: #ffffff;
}

html[data-theme="dark"]
  .selectize-control
  .custom-selectize-item.active
  .custom-selectize-header {
  color: #111111;
}

html[data-theme="dark"] .dark-theme-bg {
  background: rgb(65 65 65) !important;
}

html[data-theme="dark"] .daterangepicker {
  background: #343434;
}

html[data-theme="dark"] .daterangepicker .ranges li {
  color: #d7d7d7;
  background: #161616;
}

html[data-theme="dark"] .daterangepicker .calendar-date {
  background: #343434;
}

html[data-theme="dark"] .daterangepicker td.in-range {
  background: var(--brand-bg);
}

.input-field .search-icon {
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-field .search-icon > svg,
.input-field .search-icon > svg path {
  stroke: var(--muted);
  stroke-width: 1;
}

.search-field input[type="text"],
.input-field input[type="date"],
.search-field input[type="password"] {
  border: none;
  outline: none;
}

.input-toggle input:checked ~ .box:before,
.input-toggle input:checked ~ label:before {
  background-color: var(--toggleDeep) !important;
}

.ui.toggle.checkbox.input-toggle input:checked ~ .box:before,
.ui.toggle.checkbox.input-toggle input:checked ~ label:before {
  background-color: var(--toggleDeep) !important;
}

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
  background-color: var(--toggleDeep) !important;
}

.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
  background-color: var(--toggleLight) !important;
}

.ui.toggle.checkbox.checked .box:before,
.ui.toggle.checkbox.checked label:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: var(--toggleDeep) !important;
}

.svg-btns {
  height: 1.3rem;
  width: 1.3rem;
  padding: 0 !important;
  display: inline-flex;
  /* display: inline-flex !important; */
  align-items: center;
  justify-content: center;
}

.svg-btns > svg {
  stroke: var(--muted);
  stroke-width: 1;
}

.svg-btns > svg {
  width: 1.75rem;
  height: 1.75rem;
}

.svg-btns > svg path {
  stroke: #000000;
}

html[data-theme="dark"] .svg-btns > svg,
html[data-theme="dark"] .svg-btns > svg path,
html[data-theme="dark"] .svg-btns > svg circle,
html[data-theme="dark"] .svg-btns > svg line {
  stroke: #ffffff;
  outline-color: #ffffff;
}

.inner-nav-menu a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
  color: var(--text);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  padding-right: 0.4rem;
}

.inner-nav-menu a.active,
.inner-nav-menu a:hover {
  color: var(--brand-bg) !important;
  border-bottom-color: var(--brand-bg) !important;
  font-weight: bold;
}

.inner-nav-menu a.active .svg-btns > svg,
.inner-nav-menu a.active .svg-btns > svg path,
.inner-nav-menu a.active .svg-btns > svg circle,
.inner-nav-menu a.active .svg-btns > svg rect,
.inner-nav-menu a.active .svg-btns > svg g,
.inner-nav-menu a:hover .svg-btns > svg,
.inner-nav-menu a:hover .svg-btns > svg path,
.inner-nav-menu a:hover .svg-btns > svg circle,
.inner-nav-menu a:hover .svg-btns > svg rect,
.inner-nav-menu a:hover .svg-btns > svg g {
  stroke: var(--brand-bg) !important;
}

.inner-nav-menu a.active .svg-btns > svg path[fill]:not([fill="none"]),
.inner-nav-menu a.active .svg-btns > svg circle[fill]:not([fill="none"]),
.inner-nav-menu a.active .svg-btns > svg rect[fill]:not([fill="none"]),
.inner-nav-menu a:hover .svg-btns > svg path[fill]:not([fill="none"]),
.inner-nav-menu a:hover .svg-btns > svg circle[fill]:not([fill="none"]),
.inner-nav-menu a:hover .svg-btns > svg rect[fill]:not([fill="none"]) {
  fill: var(--brand-bg) !important;
}

.sml-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background-color: var(--brand-bg);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  color: var(--white);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.1 s ease;
  text-wrap: nowrap;
}

.sml-btn:hover {
  background-color: var(--toggleLight);
  color: var(--text);
  transition: all 0.1 s ease;
}

.sml-btn .svg-btns svg {
  width: 1.5rem;
  height: 1.5rem;
}

.sml-btn .svg-btns svg,
.sml-btn .svg-btns svg path,
.sml-btn .svg-btns svg circle,
.sml-btn .svg-btns svg rect {
  stroke: var(--white) !important;
}

.sml-btn .svg-btns svg path[fill]:not([fill="none"]),
.sml-btn .svg-btns svg circle[fill]:not([fill="none"]),
.sml-btn .svg-btns svg rect[fill]:not([fill="none"]) {
  fill: var(--white) !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.bottom-btns {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.4rem;
}

.bottom-btns .main-button {
  background-color: var(--brand-bg);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 2rem;
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--white);
}

html[data-theme="dark"] .bottom-btns .main-button {
  /* background-color: var(--text-dark); */
  background-color: var(--brand-bg);
  color: #fff;
}

html[data-theme="dark"] .bottom-btns .main-button:hover {
  /* background-color: var(--text-dark); */
  background-color: var(--brand-bg);
}

html[data-theme="dark"] .bottom-btns .main-button svg {
  color: #fff;
  stroke: #fff;
}

.bottom-btns .clear-button {
  background-color: var(--toggleLight);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 2rem;
  border-radius: 10px;
  font-size: 0.9rem;
  cursor: pointer;
  height: 2.4rem;
}
.bottom-btns .clear-button .bottom-btns-svg {
  display: none;
}

.bottom-btns .main-button svg {
  color: var(--white);
  stroke: var(--white);
}

.bottom-btns .main-button svg path {
  stroke: currentColor;
}
.w-auto {
  width: auto !important;
}
/* html[data-theme="dark"] .bottom-btns .main-button svg {
  color: #0b231c;
  stroke: #443b3b;
} */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.text-center {
  text-align: center !important;
}
html[data-theme="dark"] .bottom-btns .main-button svg path {
  stroke: currentColor;
}

html[data-theme="dark"] .bookmark-svg svg {
  /* background: var(--text); */
  stroke: var(--text);
}

html[data-theme="dark"] .icpl-checkbox span {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.bottom-btns-svg {
  height: 1.5rem;
  width: 1.5rem;
}

.bottom-btns-svg.clear-btn:hover,
.bottom-btns-svg.main-btn:hover {
  cursor: pointer;
}

label.toggle::before {
  background-color: var(--toggleDeep) !important;
}

.inner-nav-menu a .svg-btns svg {
  opacity: 0.5 !important;
}

.inner-nav-menu a.active .svg-btns svg {
  opacity: 1 !important;
}

.table-container.max-h-76 {
  max-height: 72vh;
}

.right_panel_con {
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 5px !important;
}
.first-tbody-tr-fixed {
  top: 4.1vh !important;
}
.tbody-fixed tbody .first-tr-fixed {
  top: 1.7rem;
}
.fields.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.fields.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.fields.grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

.fetch-btn {
  padding: 10px 12px;
  font-size: 0.95rem;
  background: var(--brand-bg);
  width: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  transition: all 0.1s ease;
}
html[data-theme="dark"] .fetch-btn {
  color: #fff;
}

.fetch-btn:hover {
  background: var(--toggleDeep);
  color: var(--white);
  transition: all 0.1s ease;
}

.repeat-input {
  height: auto;
}

.toggle,
.ui.checkbox.toggle,
.ui.checkbox .toggle {
  position: relative;
  /* display: inline-block; */
  width: 90px;
  height: auto;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle input[type="checkbox"],
.ui.checkbox.toggle input[type="checkbox"],
.ui.checkbox .toggle input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 10 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  opacity: 0 !important;
  margin: 0 !important;
}

.toggle label,
.ui.checkbox.toggle label,
.ui.checkbox .toggle label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 3rem !important;
  height: 1.2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.toggle label:before,
.ui.checkbox.toggle label:before,
.ui.checkbox .toggle label:before {
  content: "" !important;
  width: 3rem !important;
  height: 1.2rem !important;
  background: #ccc !important;
  position: relative !important;
  display: inline-block !important;
  border-radius: 46px !important;
  border: none !important;
  box-shadow: none !important;
  transition: 0.2s ease-in !important;
}

.toggle label:after,
.ui.checkbox.toggle label:after,
.ui.checkbox .toggle label:after {
  content: "" !important;
  position: absolute !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  border-radius: 50% !important;
  left: 0.05rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  background: #fff !important;
  box-shadow: 0 0 5px #0002 !important;
  transition: 0.2s ease-in !important;
  opacity: 1 !important;
  border: none !important;
  color: transparent !important;
}

.toggle.top-2px label:after,
.ui.checkbox.toggle.top-2px label:after,
.ui.checkbox .toggle.top-2px label:after {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.toggle input[type="checkbox"]:hover + label:after,
.ui.checkbox.toggle input[type="checkbox"]:hover + label:after,
.ui.checkbox .toggle input[type="checkbox"]:hover + label:after {
  box-shadow:
    0 2px 15px 0 #0002,
    0 3px 8px 0 #0001 !important;
}

.toggle input[type="checkbox"]:checked + label:before,
.toggle.checked label:before,
.ui.checkbox.toggle.checked label:before,
.ui.checkbox.toggle input[type="checkbox"]:checked + label:before,
.ui.checkbox .toggle input[type="checkbox"]:checked + label:before {
  background: #306a56 !important;
}

.toggle input[type="checkbox"]:checked + label:after,
.toggle.checked label:after,
.ui.checkbox.toggle.checked label:after,
.ui.checkbox.toggle input[type="checkbox"]:checked + label:after,
.ui.checkbox .toggle input[type="checkbox"]:checked + label:after {
  background: #ffffff !important;
  border: 1px solid #376fcb !important;
  left: calc(100% - 1.15rem) !important;
}

/* ==========================================================================
   Holiday Management Modern UI Styles
   ========================================================================== */

.holiday-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem 2.5rem 0.5rem;
  overflow: auto;
}

/* Loader Overlay */
.holiday-loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 14px;
}

[data-theme="dark"] .holiday-loader-backdrop {
  background: rgba(18, 18, 18, 0.8);
}

.holiday-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid var(--border);
  border-top-color: var(--brand-bg);
  border-radius: 50%;
  animation: holidaySpin 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

@keyframes holidaySpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Navigation Bar */
.holiday-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--white);
  padding: 1.15rem 1.75rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 1.75rem;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.holiday-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--page-bg);
  color: var(--brand-bg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.holiday-nav-btn:hover {
  background: var(--teal-bg);
  border-color: var(--brand-bg);
  color: var(--brand-bg);
  transform: scale(1.05);
}

.holiday-nav-btn:active {
  transform: scale(0.96);
}

.holiday-nav-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 180px;
}

.holiday-nav-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--title);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.holiday-nav-subtitle {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Year View Months Grid */
.holiday-months-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1024px) {
  .holiday-months-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .holiday-months-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .holiday-months-grid {
    grid-template-columns: 1fr;
  }
}

.holiday-month-card {
  background: var(--white);
  border: 1px solid var(--brand-bg);
  border-radius: 14px;
  padding: 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 125px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.holiday-month-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: transparent;
  transition: background 0.25s ease;
}

.holiday-month-card.has-holiday::before {
  background: var(--red);
}

.holiday-month-card.has-holiday {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  border-color: var(--red);
}

/* .holiday-month-card:hover {
  border-color: var(--brand-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
} */

.holiday-month-card.has-holiday:hover {
  border-color: var(--red);
}

.holiday-month-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.holiday-month-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--title);
  letter-spacing: -0.01em;
}

.holiday-month-view-arrow {
  color: var(--muted);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.holiday-month-card:hover .holiday-month-view-arrow {
  color: var(--brand-bg);
  opacity: 1;
  transform: translateX(3px);
}

.holiday-month-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.holiday-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.2s ease;
}

.holiday-stat-total {
  background: var(--page-bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

.holiday-stat-total.highlight {
  background: var(--red-bg);
  color: var(--red);
  border-color: rgba(200, 74, 68, 0.2);
  font-weight: 600;
}

.holiday-stat-paid {
  background: var(--teal-bg);
  color: var(--brand-bg);
  border: 1px solid rgba(47, 106, 86, 0.15);
  font-weight: 500;
}

html[data-theme="dark"] .holiday-stat-paid {
  color: #a8f2d9;
}

.holiday-stat-icon {
  flex-shrink: 0;
}

/* Month View Toolbar */
.holiday-month-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.holiday-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--brand-bg);
  border: 1px solid var(--border);
  padding: 0.65rem 1.15rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.holiday-btn-back:hover {
  background: var(--teal-bg);
  border-color: var(--brand-bg);
  color: var(--brand-bg);
  transform: translateX(-2px);
}

.holiday-nav-bar-month {
  margin-bottom: 0;
  padding: 0.75rem 1.5rem;
  flex: 1;
  max-width: 480px;
}

.holiday-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 1.15rem;
}

.holiday-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.holiday-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.holiday-legend-dot.regular {
  background: var(--border);
  border: 1px solid var(--muted);
}

.holiday-legend-dot.holiday {
  background: var(--red);
  box-shadow: 0 0 0 2px var(--red-bg);
}

@media (max-width: 768px) {
  .holiday-month-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .holiday-nav-bar-month {
    max-width: 100%;
  }

  .holiday-legend {
    justify-content: center;
  }
}

/* Calendar Board */
.holiday-calendar-wrapper {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.holiday-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.holiday-weekday-col {
  text-align: center;
  padding: 0.75rem 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--page-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.holiday-weekday-col.weekend {
  color: var(--brand-bg);
  background: var(--teal-bg);
}

/* Calendar Days Grid */
.holiday-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.holiday-day-cell {
  position: relative;
  min-height: 76px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  overflow: hidden;
}

.holiday-day-cell.is-empty {
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.06);
  opacity: 0.35;
  pointer-events: none;
}

[data-theme="dark"] .holiday-day-cell.is-empty {
  border-color: rgba(255, 255, 255, 0.08);
}

.holiday-day-cell:not(.is-empty):hover {
  border-color: var(--brand-bg);
  background: var(--teal-bg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
  z-index: 5;
}

.holiday-day-cell.is-holiday {
  background: var(--red-bg);
  border-color: rgba(200, 74, 68, 0.4);
}

.holiday-day-cell.is-holiday:hover {
  border-color: var(--red);
  background: var(--red-bg);
  box-shadow: 0 4px 14px rgba(200, 74, 68, 0.15);
}

.holiday-day-inner {
  width: 100%;
  height: 100%;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.holiday-date-number {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--title);
  line-height: 1;
}

.holiday-day-cell.is-holiday .holiday-date-number {
  color: var(--red);
}

.holiday-status-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
  background: rgba(200, 74, 68, 0.12);
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  line-height: 1.2;
}

/* Delete Holiday Button */
.holiday-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(200, 74, 68, 0.3);
  background: var(--white);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.holiday-delete-btn:hover {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red);
  transform: scale(1.1);
}

.holiday-delete-btn:active {
  transform: scale(0.95);
}

/* Bottom Action Bar */
.holiday-bottom-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

.holiday-btn-back-bottom {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--brand-bg);
  border: 1px solid var(--border);
  padding: 0.75rem 1.35rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.holiday-btn-back-bottom:hover {
  background: var(--teal-bg);
  border-color: var(--brand-bg);
  color: var(--brand-bg);
  transform: translateX(-3px);
}

.gender-toggle-btns {
  display: flex;
  gap: 8px;
}

.gender-btn {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--white-90, inherit);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.gender-btn:hover {
  border-color: var(--brand-bg, #00897b);
}

.gender-btn.active {
  background: #2185d0;
  color: #fff;
  border-color: #2185d0;
}

/* Multi-select dropdown */
.multi-select {
  position: relative;
  width: 100%;
}

.multi-select-display {
  /* height: 38px; */
  border: 1px solid var(--input-border, #ccc);
  border-radius: 4px;
  padding: 8px 8px;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--input-bg, #fff);
  color: var(--white-90, #333);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  user-select: none;
}

.multi-select-display .multi-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 18px;
  color: var(--black);
}
html[data-theme="dark"] .multi-select-display .multi-select-text {
  color: #fff;
}

.multi-select-display .arrow {
  position: absolute;
  right: 10px;
  font-size: 10px;
  color: #888;
  pointer-events: none;
}

.multi-select-menu {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  min-width: 160px;
  background: var(--input-bg, #fff);
  border: 1px solid var(--input-border, #ccc);
  border-radius: 4px;
  z-index: 1000;
  padding: 5px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 220px;
  overflow-y: auto;
}

.multi-select-menu label {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.92rem;
  /* color: var(--white-90, #333); */
  margin-bottom: 0;
  transition: background 0.15s ease;
}

.multi-select-menu label:hover {
  background: rgba(0, 137, 123, 0.08);
}

html[data-theme="dark"] .multi-select-menu label:hover {
  background: rgba(255, 255, 255, 0.08);
}

.multi-select-menu input {
  margin-right: 8px;
  cursor: pointer;
}

/* Topbar Hamburger Button */
.topbar-hamburger-btn {
  background: transparent;
  border: none;
  color: var(--text, #333);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  line-height: 1;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.topbar-hamburger-btn:hover {
  background: var(--border, rgba(0, 0, 0, 0.06));
  color: var(--title, #000);
}

html[data-theme="dark"] .topbar-hamburger-btn {
  color: var(--text, #e0e0e0);
}

html[data-theme="dark"] .topbar-hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--title, #fff);
}

/* Collapsed Sidebar Mode (e.g. Leaf Control screen) */
.collapsed-sidebar-mode .close-sidebar {
  display: none !important;
}

.collapsed-sidebar-mode .sidebar {
  min-width: 0 !important;
  width: 0 !important;
}

.collapsed-sidebar-mode .open-sidebar.close {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

.collapsed-sidebar-mode .open-sidebar:not(.close) {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 280px !important;
  max-width: 85vw !important;
  height: 100vh !important;
  z-index: 1000 !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25) !important;
  overflow-y: auto !important;
}

/* Custom Empty State Container */
.custom-empty-container {
  background: var(--input-bg, #ffffff);
  /* border: 1px solid var(--input-border, #e2e8f0); */
  border-radius: 12px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
  width: 100%;
  min-height: 320px;
  box-sizing: border-box;
}

.custom-empty-icon {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  width: 4rem;
  background: var(--badge-bg, #b3cbc4);
  padding: 0.5rem;
  border-radius: 50%;
}

.custom-empty-icon svg {
  width: 2.2rem;
  height: 2.2rem;
  stroke: var(--badge-icon-color, #1a4b3e);
}

html[data-theme="dark"] .custom-empty-icon {
  background: var(--badge-bg, #1f4b3f);
}

html[data-theme="dark"] .custom-empty-icon svg {
  stroke: var(--badge-icon-color, #7bdac6);
}

html[data-theme="dark"] .custom-empty-icon svg g path {
  stroke: #fff;
}

.custom-empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--title, #111827);
  margin-bottom: 8px;
  margin-top: 0;
}

.custom-empty-subtitle {
  font-size: 0.9rem;
  color: var(--muted, #6b7280);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.5;
}

.fake-toggle input {
  display: none;
}

.fake-toggle span {
  cursor: pointer;
  width: 54px;
  height: 27px;
  display: inline-block;
  background-image: url("/images/toggle-off.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fake-toggle input:checked + span {
  background-image: url("/images/toggle-on.png");
}

/* Custom UI Component System (Replacing Semantic UI) */
.custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  user-select: none;
  text-decoration: none;
  background: var(--input-bg, #f3f4f6);
  color: var(--black, #1f2937);
  box-sizing: border-box;
}

.custom-btn-primary {
  background: var(--brand-bg, #00897b);
  color: #ffffff !important;
  border-color: var(--brand-bg, #00897b);
}

.custom-btn-primary:hover {
  background: var(--toggleDeep, #1b4b3e);
  border-color: var(--toggleDeep, #1b4b3e);
}

.custom-btn-secondary {
  background: var(--toggleLight, #8aa29b);
  color: #ffffff !important;
  border-color: var(--toggleLight, #8aa29b);
  white-space: nowrap;
  font-size: 0.8rem;
}

.custom-btn-success {
  background: #2e7d32;
  color: #ffffff !important;
  border-color: #2e7d32;
}

.custom-btn-success:hover {
  background: #1b5e20;
}

.custom-btn-danger {
  background: #d32f2f;
  color: #ffffff !important;
  border-color: #d32f2f;
}

.custom-btn-danger:hover {
  background: #c62828;
}

.custom-btn-fluid {
  width: 100%;
}

.custom-btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.custom-btn-lg {
  padding: 0.8rem 1.5rem;
  font-size: 1.05rem;
}

/* Custom Form & Field System */
.custom-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.custom-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 180px;
}

.custom-form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

html[data-theme="dark"] .custom-form-group label {
  color: var(--green-bg);
}

.custom-form-control {
  height: 38px;
  padding: 8px 12px !important;
  border: 1px solid var(--input-border, #d1d5db);
  border-radius: 6px;
  background: var(--input-bg, #ffffff);
  color: var(--black, #111827);
  font-size: 0.95rem;
  box-sizing: border-box;
  width: 100%;
}

html[data-theme="dark"] .custom-form-control {
  color: var(--text) !important;
}

.custom-form-control:focus {
  outline: none;
  border-color: var(--brand-bg, #00897b);
}

.custom-form#notify_kamjari_form select {
  background: #1e293a !important;
}

/* Custom Dimmer & Spinner Loader */
.custom-dimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

html[data-theme="dark"] .custom-dimmer {
  background: rgba(15, 23, 42, 0.7);
}

.custom-spinner {
  width: 38px;
  height: 38px;
  border: 3.5px solid var(--input-border, #e2e8f0);
  border-top-color: var(--brand-bg, #00897b);
  border-radius: 50%;
  animation: custom-spin 0.8s linear infinite;
}

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

/* Custom Alert Messages */
.custom-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.custom-alert-danger {
  background: #fde8e8;
  color: #9b1c1c;
  border: 1px solid #f8b4b4;
}

html[data-theme="dark"] .custom-alert-danger {
  background: #371b1b;
  color: #f8b4b4;
  border-color: #771d1d;
}

.custom-alert-info {
  background: #e1effe;
  color: #1e429f;
  border: 1px solid #a4cafe;
}

html[data-theme="dark"] .custom-alert-info {
  background: #1e293b;
  color: #93c5fd;
  border-color: #3b82f6;
}

.custom-alert-success {
  background: #def7ec;
  color: #03543f;
  border: 1px solid #84e1bc;
}

html[data-theme="dark"] .custom-alert-success {
  background: #14382c;
  color: #84e1bc;
  border-color: #0e6245;
}

/* Custom & Modern Minimal Modal System */
/* Default state: All modals and overlays are hidden by default */
.ui.modal,
.custom-modal-overlay,
.custom-modal-overlay.hidden,
.ui.modal.hidden {
  display: none !important;
}

.custom-modal-window {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.ui.modal > .custom-modal-window {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: none !important;
}

/* Backdrop dimmer & overlay system */
.custom-modal-overlay {
  display: none !important;
}

.ui.dimmer.modals.page {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 2000 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .custom-modal-overlay,
html[data-theme="dark"] .ui.dimmer.modals.page {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* Shown state for active backdrop overlay */
.custom-modal-overlay.active,
.custom-modal-overlay.visible,
.custom-modal-overlay.show,
.ui.dimmer.modals.page.active,
.ui.dimmer.modals.page.visible {
  display: flex !important;
}

/* Inactive or hidden modals must stay hidden */
.ui.modal.hidden,
.ui.modal.transition.hidden,
.ui.dimmer.modals.page > .ui.modal.hidden,
.ui.dimmer.modals.page > .ui.modal.transition.hidden,
.ui.dimmer.modals.page > .ui.modal:not(.active):not(.visible):not(.animating),
.custom-modal-overlay:not(.active):not(.visible):not(.show) {
  display: none !important;
}

/* Modal Window Card Box (only visible when inside active overlay or triggered) */
.ui.dimmer.modals.page > .ui.modal.active,
.ui.dimmer.modals.page > .ui.modal.visible,
.ui.dimmer.modals.page > .ui.modal.animating,
.custom-modal-overlay.active > .custom-modal-window,
.custom-modal-overlay.visible > .custom-modal-window,
.custom-modal-overlay.show > .custom-modal-window,
.ui.modal.active,
.ui.modal.visible,
.ui.modal.show,
.custom-modal-window.active,
.custom-modal-window.visible,
.custom-modal-window.show {
  display: flex !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  min-height: auto !important;
  max-height: calc(90vh - 40px) !important;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  flex-direction: column !important;
  margin: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  position: relative !important;
  transform: none !important;
  animation: customModalScaleIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

html[data-theme="dark"] .ui.dimmer.modals.page > .ui.modal.active,
html[data-theme="dark"] .ui.dimmer.modals.page > .ui.modal.visible,
html[data-theme="dark"] .ui.dimmer.modals.page > .ui.modal.animating,
html[data-theme="dark"] .custom-modal-overlay.active > .custom-modal-window,
html[data-theme="dark"] .custom-modal-overlay.visible > .custom-modal-window,
html[data-theme="dark"] .custom-modal-overlay.show > .custom-modal-window,
html[data-theme="dark"] .ui.modal.active,
html[data-theme="dark"] .ui.modal.visible,
html[data-theme="dark"] .ui.modal.show,
html[data-theme="dark"] .custom-modal-window.active,
html[data-theme="dark"] .custom-modal-window.visible,
html[data-theme="dark"] .custom-modal-window.show {
  background: #1e293b !important;
  color: #f3f4f6 !important;
  border-color: #334155 !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

@keyframes customModalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-6px) !important;
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0) !important;
  }
}

/* Modal Size Modifiers */
.custom-modal-sm {
  max-width: 420px !important;
}

.custom-modal-lg {
  max-width: 720px !important;
}

/* Modal Header */
.custom-modal-header,
.ui.modal > .header,
.custom-modal-window > .header,
.custom-modal-window > .custom-modal-header {
  padding: 16px 20px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: auto !important;
}

html[data-theme="dark"] .custom-modal-header,
html[data-theme="dark"] .ui.modal > .header,
html[data-theme="dark"] .custom-modal-window > .header,
html[data-theme="dark"] .custom-modal-window > .custom-modal-header {
  color: #f8fafc !important;
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* Modal Body / Content */
.custom-modal-body,
.ui.modal > .content,
.custom-modal-window > .content,
.custom-modal-window > .custom-modal-body {
  padding: 20px !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  color: #334155 !important;
  background: transparent !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: calc(75vh - 100px) !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .custom-modal-body,
html[data-theme="dark"] .ui.modal > .content,
html[data-theme="dark"] .custom-modal-window > .content,
html[data-theme="dark"] .custom-modal-window > .custom-modal-body {
  color: #cbd5e1 !important;
}

/* Modal Footer / Actions */
.custom-modal-footer,
.ui.modal > .actions,
.custom-modal-window > .actions,
.custom-modal-window > .custom-modal-footer {
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
  height: auto !important;
}

html[data-theme="dark"] .custom-modal-footer,
html[data-theme="dark"] .ui.modal > .actions,
html[data-theme="dark"] .custom-modal-window > .actions,
html[data-theme="dark"] .custom-modal-window > .custom-modal-footer {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* Custom Flex Grid */
.custom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.custom-col-12 {
  width: 100%;
}

.custom-col-6 {
  width: calc(50% - 8px);
}

.custom-col-3 {
  width: calc(25% - 12px);
}

.custom-col-8 {
  width: calc(66.666% - 8px);
}

.custom-btn-dark {
  background: #49655e;
  color: #ffffff !important;
  border-color: #1f2937;
}

.custom-btn-dark:hover {
  background: #111827;
}

.custom-card,
.custom-segment {
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--input-border, #e2e8f0);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .custom-card,
html[data-theme="dark"] .custom-segment {
  background: var(--input-bg, #1e293b);
  border-color: var(--input-border, #334155);
}

.custom-col-3 {
  width: calc(25% - 12px);
}

.similar-worker {
  max-height: 84vh;
  overflow: auto;
}

.similar-worker .img-hover-zoom img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.detail-valo02 {
  color: #1c1c1c !important;
  background: #bbbbbb !important;
}

html[data-theme="dark"] .detail-valo02 {
  color: #fff !important;
  background: #282828 !important;
}

html[data-theme="dark"] .calendar_data ul li dt.activeDate {
  color: #007a5a !important;
}

/* ==========================================================================
   Custom Tab Navigation System
   ========================================================================== */
.custom-tab-menu,
.tabular.menu {
  display: flex !important;
  align-items: flex-end;
  gap: 0.35rem;
  border-bottom: 2px solid var(--border, #e6ece6);
  background: var(--page-bg, #ffffff);
  margin: 0 0 1rem 0;
  padding: 0 0.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0 !important;
  min-height: 46px;
  width: 100%;
  box-sizing: border-box;
  visibility: visible !important;
  opacity: 1 !important;
}

.custom-tab-menu::-webkit-scrollbar,
.tabular.menu::-webkit-scrollbar {
  display: none;
}

.custom-tab-item,
.custom-tab-menu .item,
.tabular.menu .item {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted, #6b7f79);
  text-decoration: none;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
}

.custom-tab-item:hover,
.custom-tab-menu .item:hover,
.tabular.menu .item:hover {
  color: var(--brand-bg, #2f6a56);
  background: rgba(47, 106, 86, 0.05);
}

.custom-tab-item.active,
.custom-tab-menu .item.active,
.tabular.menu .item.active {
  color: var(--brand-bg, #2f6a56);
  background: var(--page-bg, #ffffff);
  border: 1px solid var(--border, #e6ece6);
  border-bottom: 2px solid var(--page-bg, #ffffff);
  border-top: 3px solid var(--brand-bg, #2f6a56);
  font-weight: 700;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.02);
}

/* Tab Content Panel */
.custom-tab-content,
.tab.segment {
  display: none;
  background: var(--page-bg, #ffffff);
  border: 1px solid var(--border, #e6ece6);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  position: relative;
  flex-shrink: 0;
}

.custom-tab-content:not(.active),
.tab.segment:not(.active) {
  display: none !important;
}

.custom-tab-content.active,
.tab.segment.active {
  display: block !important;
  animation: customTabFadeIn 0.25s ease-out;
}

@keyframes customTabFadeIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark Theme Support */
html[data-theme="dark"] .custom-tab-menu,
html[data-theme="dark"] .tabular.menu {
  background: var(--page-bg, #121212);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .custom-tab-item,
html[data-theme="dark"] .custom-tab-menu .item,
html[data-theme="dark"] .tabular.menu .item {
  color: #94a3b8;
}

html[data-theme="dark"] .custom-tab-item:hover,
html[data-theme="dark"] .custom-tab-menu .item:hover,
html[data-theme="dark"] .tabular.menu .item:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .custom-tab-item.active,
html[data-theme="dark"] .custom-tab-menu .item.active,
html[data-theme="dark"] .tabular.menu .item.active {
  color: #34d399;
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid #1e293b;
  border-top: 3px solid #10b981;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .custom-tab-content,
html[data-theme="dark"] .tab.segment {
  /* background: #1e293b; */
  border-color: var(--brand-bg);
  color: #f1f5f9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.custom-tab-content.file-upload-tab .tiny.images > img {
  height: 5rem !important;
}

.file-upload-tab .div_drag p > label {
  font-size: 1.5rem;
  margin: 2rem;
}

/* ==========================================================================
   Tealink Login Page (Standalone, Zero external framework dependency)
   ========================================================================== */

.login-page-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  font-family:
    "Segoe UI",
    Roboto,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Fullscreen Background Banner */
.login-banner,
.banner {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.login-banner-img,
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(2px);
  transform: scale(1.02);
  z-index: -2;
}

.login-banner-overlay,
.banner-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--login-banner-overlay, rgba(255, 255, 255, 0.22));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: -1;
}

/* Central Page Container */
.login-container,
.ui.container.login-container,
body[data-page="login2"] .ui.container {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* Glass Card */
.login-card,
.glass-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: min(880px, 92vw);
  height: 520px;
  max-height: 90vh;
  background: var(--login-card-bg, rgba(255, 255, 255, 0.43));
  border-radius: 20px;
  border: 1px solid var(--login-card-border, rgba(255, 255, 255, 0.55));
  box-shadow: var(
    --login-card-shadow,
    0 16px 40px rgba(19, 65, 57, 0.22),
    0 2px 10px rgba(0, 0, 0, 0.08)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 auto;
}

/* Left Illustration Pane */
.login-media,
.left-image {
  flex: 1.15;
  width: 54%;
  height: 100%;
  overflow: hidden;
  position: relative;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

html[data-theme="dark"] .dark-theme-bg.section-table tbody td {
  background-color: var(--page-bg);
}

.login-media-img,
.left-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% center;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: block;
}

/* Right Content / Form Pane */
.login-content,
.login-form-column,
.sixteen.wide.mobile-margin {
  flex: 1;
  width: 46%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 44px 38px 36px 38px;
  box-sizing: border-box;
  margin: 0;
}

/* Logo */
.tealink-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.tealink-logo-img {
  height: 8rem;
  /* max-height: 52px; */
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

.tealink-logo-img.logo-dark {
  display: none;
}

[data-theme="dark"] .tealink-logo-img.logo-light {
  display: none;
}

[data-theme="dark"] .tealink-logo-img.logo-dark {
  display: block;
  margin: 1.5rem;
}

.tealink-logo-dark-svg {
  display: none !important;
  width: 100%;
  max-width: 210px;
  height: auto;
}

[data-theme="dark"] .tealink-logo-dark-svg,
html[data-theme="dark"] .tealink-logo-dark-svg {
  display: block !important;
  width: 100%;
  max-width: 210px;
  height: auto;
}

/* Form */
.login-form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login-field,
.login-form .field {
  width: 100%;
  position: relative;
  margin: 0 0 12px 0;
  box-sizing: border-box;
}

/* Pill / Rounded-Rectangle Input Container */
.login-input-wrap,
.login-form .ui.input {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  background-color: var(--login-input-bg, #ffffff);
  border-radius: 10px;
  border: 1px solid var(--login-input-border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.login-input-wrap:focus-within,
.login-form .ui.input:focus-within {
  border-color: var(--brand-bg, #2f6a56);
  box-shadow: 0 0 0 2px rgba(47, 106, 86, 0.22);
}

/* Inline SVG Icon */
.login-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  fill: var(--login-input-icon, #2d3748);
  color: var(--login-input-icon, #2d3748);
  pointer-events: none;
  opacity: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Form Input Element */
.login-input,
.login-form .field input {
  width: 100%;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 14px 0 38px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--login-input-text, #243b2b) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  line-height: normal !important;
}

.login-input::placeholder,
.login-form .field input::placeholder {
  color: var(--login-input-placeholder, #718096) !important;
  opacity: 0.85;
  font-size: 13.5px !important;
  font-weight: normal !important;
}

/* Error Message */
.login-error {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 8px 0;
  text-align: center;
  min-height: 18px;
}

.login-error.display-none {
  display: none;
}

.error-message {
  color: var(--login-error-color, #d32f2f) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

/* Submit Button */
.login-btn-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.login-btn,
.login-form .ui.primary.button.login-btn {
  width: 100% !important;
  height: 44px !important;
  background-color: var(--login-btn-bg, #1f4b3f) !important;
  color: var(--login-btn-text, #ffffff) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.login-btn:hover {
  background-color: var(--login-btn-hover, #173b32) !important;
  box-shadow: 0 4px 12px rgba(23, 59, 50, 0.3) !important;
}

.login-btn:active {
  background-color: var(--login-btn-active, #13332a) !important;
  transform: scale(0.985);
}

.login-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(31, 75, 63, 0.35) !important;
}

/* Forgot Password Link */
.forgot-password-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
}

.forgot-password {
  color: var(--login-link-color, #1f4b3f) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  cursor: pointer;
}

.forgot-password:hover {
  color: var(--login-link-hover, #13332a) !important;
  text-decoration: underline !important;
}

/* Login Page Theme Toggle (Top Right Corner) */
.login-theme-toggle-wrap {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 1000;
}

body[data-page="login2"] #gate-theme.theme {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--brand-bg, #1f4b3f);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

body[data-page="login2"] #gate-theme.theme:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

body[data-page="login2"] #gate-theme.theme:active {
  transform: scale(0.95);
}

body[data-page="login2"] #gate-theme.theme svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Dark theme overrides for login theme toggle */
html[data-theme="dark"] body[data-page="login2"] #gate-theme.theme {
  background: rgba(18, 36, 29, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #74c8b2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] body[data-page="login2"] #gate-theme.theme:hover {
  background: rgba(28, 56, 45, 0.9);
  color: #a1ebd6;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
  .login-theme-toggle-wrap {
    top: 14px;
    right: 14px;
  }

  body[data-page="login2"] #gate-theme.theme {
    width: 40px;
    height: 40px;
  }

  body[data-page="login2"] #gate-theme.theme svg {
    width: 20px;
    height: 20px;
  }
}

/* Create worker tabs */
.create-worker-tabs.custom-tab-menu {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  min-height: 45px;
  margin-bottom: 1rem;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--page-bg);
  flex-shrink: 0 !important;
}

.create-worker-tabs .custom-tab-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.create-worker-tabs .custom-tab-item.active {
  color: var(--brand-bg);
  font-weight: 700;
  border-bottom-color: var(--brand-bg);
}

.create-worker-tabs .custom-tab-item:hover {
  color: var(--brand-bg);
}

/* Ration Configuration Tabs */
.ration-config-tabs {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  gap: 0.35rem !important;
  background: var(--page-bg) !important;
  border-bottom: 2px solid var(--border, #2d2d2d) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  flex-shrink: 0 !important;
}

.ration-config-tabs > .custom-tab-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 44px !important;
  padding: 0.75rem 1.35rem !important;
  margin: 0 !important;
  color: var(--text, #e0e0e0) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.ration-config-tabs > .custom-tab-item:hover {
  color: var(--brand-bg, #2f6a56) !important;
  background: rgba(47, 106, 86, 0.08) !important;
}

.ration-config-tabs > .custom-tab-item.active {
  color: var(--brand-bg, #74c8b2) !important;
  background: var(--page-bg, #121212) !important;
  border-bottom: 3px solid var(--brand-bg, #2f6a56) !important;
  font-weight: 700 !important;
}

/* Do not let dropdown menu affect page layout */
.dropdown {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle;
}

/* Menu is removed from normal document flow */
.dropdown > .menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: auto !important;
  right: 0 !important;

  display: none !important;
  min-width: 190px;
  margin: 0 !important;

  z-index: 99999 !important;
  transform: none !important;
}

/* Show only the manually opened dropdown */
.dropdown.global-dropdown-open > .menu {
  display: block !important;
}

/* Override Semantic UI transition classes */
.dropdown > .menu.transition,
.dropdown > .menu.visible,
.dropdown > .menu.active {
  transform: none !important;
}

/* Prevent the icon/button itself from moving */
.excel-download-options {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: 40px;
  box-sizing: border-box;
}

/* Avoid layout changes caused by borders or transitions */
.excel-download-options,
.excel-download-options > i {
  transition: none !important;
}

.ration-config-tabs > .bottom-btns {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding-bottom: 0.35rem !important;
}

.pointing.dropdown.button {
  position: relative;
}

.pointing.dropdown.button .menu.nine-nine {
  display: none;
}

/* Light theme */
.pointing.dropdown.button.global-dropdown-open > .menu.nine-nine {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  background: #fff !important;
  white-space: nowrap !important;
  padding: 0rem 1.2rem !important;
  border: 1px solid var(--brand-bg) !important;
  border-radius: 0.35rem !important;
  z-index: 99999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Dark theme */
html[data-theme="dark"]
  .pointing.dropdown.button.global-dropdown-open
  > .menu.nine-nine {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  background: #121212 !important;
  white-space: nowrap !important;
  padding: 0rem 1.2rem !important;
  border: 1px solid var(--brand-bg) !important;
  border-radius: 0.35rem !important;
  z-index: 99999 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.pointing.dropdown.button:not(.global-dropdown-open) > .menu.nine-nine {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Global dropdown fix */
.excel-download-options {
  position: relative !important;
  cursor: pointer;
}

/* Keep menu outside normal document flow */
.excel-download-options > .menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: auto !important;
  right: 0 !important;

  min-width: 190px;
  margin: 0 !important;
  z-index: 99999 !important;

  transform: none !important;
  transition: none !important;
}

/* Closed state */
.excel-download-options > .menu.hidden,
.excel-download-options > .menu:not(.global-menu-open) {
  display: none !important;
}

/* Open state */
.excel-download-options.global-dropdown-open > .menu,
.excel-download-options.active > .menu.visible,
.excel-download-options > .menu.global-menu-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Remove invalid inline display generated by Semantic UI */
.excel-download-options > .menu[style*="display: undefined"] {
  display: block !important;
}

.menu.nine-nine.hidden {
  display: none !important;
}

.select-usermanagement.selection.ui.dropdown i.dropdown.icon {
  position: absolute !important;
}
.holiday-modal.ui.modal.custom-modal-overlay.visible.active.open.show {
  overflow: hidden !important;
}

html[data-theme="dark"] .sml-btn {
  /* background-color: var(--white); */
  color: var(--text);
}

html[data-theme="dark"] .sml-btn .svg-btns svg path[fill]:not([fill="none"]),
html[data-theme="dark"] .sml-btn .svg-btns svg circle[fill]:not([fill="none"]),
html[data-theme="dark"] .sml-btn .svg-btns svg rect[fill]:not([fill="none"]) {
  fill: var(--text) !important;
}
.fetch-btn.worker-monthly {
  padding: 9px 12px;
  font-size: 0.9rem;
}
.worker-excel .btn img {
  filter: brightness(0) invert(1);  
}
.worker-excel .btn span {
  color: #fff;
}
.ui-grid-header-cell {
  background-color: var(--brand-bg) !important;
}
.ui-grid-menu-button {
  border-left: 1px solid #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
  background: var(--brand-bg) !important;
}
.btn.master-btn.red {
  background-color: rgb(227, 114, 114) !important;
  color: rgb(255, 255, 255);
}
.btn.master-btn.green {
  color: #fff;
}
.ui.form .field>label {
  color: var(--brand-bg);
}
/* Responsive Breakpoints */
@media (max-width: 860px) {
  .login-card,
  .glass-card {
    flex-direction: column;
    width: min(480px, 92vw);
    min-height: auto;
    max-height: none;
    border-radius: 20px;
  }

  .login-media,
  .left-image {
    width: 100%;
    height: 220px;
    min-height: unset;
    flex: none;
    border-radius: 20px 20px 0 0;
  }

  .login-media-img,
  .left-image img {
    border-radius: 20px 20px 0 0;
    object-position: center 30%;
  }

  .login-content,
  .login-form-column,
  .sixteen.wide.mobile-margin {
    width: 100%;
    padding: 30px 24px 32px 24px;
    border-radius: 0 0 20px 20px;
  }

  .login-form {
    max-width: 320px;
  }
}

@media (max-width: 520px) {
  .login-container,
  .ui.container.login-container,
  body[data-page="login2"] .ui.container {
    padding: 14px;
  }

  .login-card,
  .glass-card {
    width: 100%;
    border-radius: 16px;
  }

  .login-media,
  .left-image {
    height: 170px;
    border-radius: 16px 16px 0 0;
  }

  .login-media-img,
  .left-image img {
    border-radius: 16px 16px 0 0;
    object-position: center 25%;
  }

  .login-content,
  .login-form-column,
  .sixteen.wide.mobile-margin {
    padding: 22px 18px 24px 18px;
    border-radius: 0 0 16px 16px;
  }

  .tealink-logo {
    margin-bottom: 18px;
  }

  .tealink-logo-img {
    height: 38px;
  }

  .tealink-logo-dark-svg {
    max-width: 130px;
  }

  .login-input-wrap,
  .login-form .ui.input {
    height: 42px;
  }

  .login-btn,
  .login-form .ui.primary.button.login-btn {
    height: 42px !important;
  }

  .forgot-password-wrap {
    margin-top: 12px;
  }
}

/* ==========================================================================
   Daily Plucking - Filter Card & Post-Fetch Toolbar
   ========================================================================== */
.dp-top-filter-card {
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  /* padding: 14px 18px 10px 18px; */
  padding: 0.4rem 0.6rem 0;
  /* margin-bottom: 12px; */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

html[data-theme="dark"] .dp-top-filter-card {
  background: var(--white, #1e1e1e);
  border-color: var(--border, #2d2d2d);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.dp-btn-field {
  display: flex;
  flex-direction: column;
}

.dp-btn-full {
  width: 100% !important;
  height: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  border: none !important;
}

#download-as-excel.dp-excel-btn {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 38px;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: var(--text, #1f2937);
  user-select: none;
  align-self: flex-end;
}

#download-as-excel.dp-excel-btn .visible.content {
  display: flex;
  align-items: center;
}

#download-as-excel.dp-excel-btn .hidden.content {
  display: inline;
}

html[data-theme="dark"] #download-as-excel.dp-excel-btn {
  color: var(--text, #e0e0e0);
}

/* Daily Plucking Summary Card (Mockup Exact Match) */
.dp-summary-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--input-bg, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 12px 18px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

html[data-theme="dark"] .dp-summary-card {
  background: var(--white, #1e1e1e);
  border-color: var(--border, #2d2d2d);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Row 1: Shift, Section, Batch & Weighment Pills */
.dp-summary-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.dp-summary-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.dp-meta-item {
  font-size: 13px;
  color: var(--text, #1f2937);
}

.dp-meta-item strong {
  font-weight: 700;
  color: var(--text, #111827);
  margin-right: 4px;
}

html[data-theme="dark"] .dp-meta-item {
  color: var(--text, #d1d5db);
}

html[data-theme="dark"] .dp-meta-item strong {
  color: #ffffff;
}

/* Weighment Pills */
.dp-weighment-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dp-weighment-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s ease;
}

/* Active weighment pill (>0): Mint Green */
.dp-weighment-pill.dp-pill-active {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #2e7d32;
}

html[data-theme="dark"] .dp-weighment-pill.dp-pill-active {
  background: #14352f;
  border-color: rgba(116, 200, 178, 0.35);
  color: #74c8b2;
}

/* Zero weighment pill (==0): Soft Gray */
.dp-weighment-pill.dp-pill-zero {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #6b7280;
}

html[data-theme="dark"] .dp-weighment-pill.dp-pill-zero {
  background: #262626;
  border-color: #383838;
  color: #9ca3af;
}

.dp-pill-count {
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.9;
}

/* Row 2: Attendance Toggles & Weighment Actions */
.dp-summary-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Attendance Toggle Controls */
.dp-attendance-toggles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.dp-toggle-control {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.dp-toggle-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text, #111827);
  white-space: nowrap;
}

html[data-theme="dark"] .dp-toggle-title {
  color: var(--text, #f3f4f6);
}

/* Toggle Switch */
.dp-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.dp-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.dp-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  border-radius: 18px;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dp-switch-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dp-switch input:checked + .dp-switch-slider {
  background-color: #2f6a56;
}

.dp-switch input:checked + .dp-switch-slider:before {
  transform: translateX(16px);
}

html[data-theme="dark"] .dp-switch-slider {
  background-color: #475569;
}

html[data-theme="dark"] .dp-switch input:checked + .dp-switch-slider {
  background-color: #2ec09a;
}

html[data-theme="dark"] .dp-switch input:checked + .dp-switch-slider:before {
  background-color: #0f2922;
}

/* Right Actions */
.dp-summary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* flex-wrap: wrap; */
  margin-left: auto;
}

.dp-action-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text, #374151);
  white-space: nowrap;
}

html[data-theme="dark"] .dp-action-label {
  color: var(--text, #d1d5db);
}

.dp-action-input {
  width: 72px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--deepBorder, #d1d5db);
  border-radius: 6px;
  background: var(--input-bg, #ffffff);
  color: var(--text, #111827);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.dp-action-input:focus {
  border-color: #2f6a56;
  box-shadow: 0 0 0 2px rgba(47, 106, 86, 0.15);
}

html[data-theme="dark"] .dp-action-input {
  background: var(--input-bg, #111111);
  border-color: var(--border, #374151);
  color: var(--text, #f3f4f6);
}

html[data-theme="dark"] .dp-action-input:focus {
  border-color: #2ec09a;
  box-shadow: 0 0 0 2px rgba(46, 192, 154, 0.2);
}

.dp-search-icon {
  cursor: pointer;
  color: var(--muted, #4b5563);
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.dp-search-icon:hover {
  color: #2f6a56;
  transform: scale(1.1);
}

html[data-theme="dark"] .dp-search-icon {
  color: var(--muted, #9ca3af);
}

html[data-theme="dark"] .dp-search-icon:hover {
  color: #2ec09a;
}

.dp-action-save-btn {
  background: #285c4d !important;
  color: #ffffff !important;
  height: 32px !important;
  padding: 0 16px !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease;
}

.dp-action-save-btn:hover {
  background: #1f473c !important;
}

html[data-theme="dark"] .dp-action-save-btn {
  background: #1f4b3f !important;
}

html[data-theme="dark"] .dp-action-save-btn:hover {
  background: #285c4d !important;
}

.table-container.max-70 {
  max-height: 70vh;
}

.bg-green.z-1 {
  z-index: 1 !important;
  position: sticky;
  top: 5.8vh;
  background: var(--white);
}

/* Global custom modal fix */
.ui.modal.custom-modal-overlay {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.96) !important;

  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  z-index: 1001 !important;
  width: auto !important;
  max-width: calc(100vw - 30px) !important;
  max-height: calc(100vh - 30px) !important;
  overflow: visible !important;
  margin: 0 !important;
}

.ui.modal.custom-modal-overlay.visible,
.ui.modal.custom-modal-overlay.active,
.ui.modal.custom-modal-overlay.open,
.ui.modal.custom-modal-overlay.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.ui.modal.custom-modal-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* The actual content window */
.custom-modal-window {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1002 !important;
}

/* Modal dimmer */
.global-modal-dimmer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}

.global-modal-dimmer.visible,
.global-modal-dimmer.active,
.global-modal-dimmer.show {
  display: block !important;
}

/* Global custom modal fix */
.ui.modal.custom-modal-overlay {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.96) !important;

  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  z-index: 1001 !important;
  width: auto !important;
  max-width: calc(100vw - 30px) !important;
  max-height: calc(100vh - 30px) !important;
  overflow: visible !important;
  margin: 0 !important;
}

.ui.modal.custom-modal-overlay.visible,
.ui.modal.custom-modal-overlay.active,
.ui.modal.custom-modal-overlay.open,
.ui.modal.custom-modal-overlay.show {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.ui.modal.custom-modal-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* The actual content window */
.custom-modal-window {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1002 !important;
}

/* Modal dimmer */
.global-modal-dimmer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}

.global-modal-dimmer.visible,
.global-modal-dimmer.active,
.global-modal-dimmer.show {
  display: block !important;
}

/* 1. Base icon styling (NO background-image) */
.sidebar-icons {
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  background-color: #fff; /* Default inactive color */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}

/* 2. Mask icon assignment per menu group (defined only once) */
.nav-group.dashboard .sidebar-icons {
  -webkit-mask-image: url("/images/dashboard.svg");
  mask-image: url("/images/dashboard.svg");
}

.nav-group.user_management .sidebar-icons {
  -webkit-mask-image: url("/images/users.svg");
  mask-image: url("/images/users.svg");
}

.nav-group.company_management .sidebar-icons,
.nav-group.company_super_admin .sidebar-icons {
  -webkit-mask-image: url("/images/company.svg");
  mask-image: url("/images/company.svg");
}

.nav-group.master_management .sidebar-icons {
  -webkit-mask-image: url("/images/master.svg");
  mask-image: url("/images/master.svg");
}

.nav-group.transaction_management .sidebar-icons {
  -webkit-mask-image: url("/images/transaction.svg");
  mask-image: url("/images/transaction.svg");
}

.nav-group.reports .sidebar-icons {
  -webkit-mask-image: url("/images/report.svg");
  mask-image: url("/images/report.svg");
}

/* 3. Color States */
/* When nav-item is active -> brand color */
.nav-group .nav-item.active .sidebar-icons {
  background-color: var(--brand-bg);
}

/* In open sidebar, parent menu icons stay white */
.open-sidebar .nav-group .nav-item.has-child.open .sidebar-icons,
.open-sidebar .nav-group .nav-item.has-child.active .sidebar-icons,
.open-sidebar
  .nav-group
  .nav-item.has-child:not(.open):not(.active)
  .sidebar-icons {
  background-color: #fff;
}

/* In close sidebar, active menu icon (including has-child) is brand color */
.close-sidebar .nav-group .nav-item.active .sidebar-icons,
.close-sidebar .nav-group .nav-item.has-child.active .sidebar-icons {
  background-color: var(--brand-bg) !important;
}

/* When has-child is closed and inactive -> white */
.nav-group .nav-item.has-child:not(.open):not(.active) .sidebar-icons {
  background-color: #fff;
}

/* 4. Dashboard inline SVG support */
.nav-group .nav-item .sidebar-icons > svg path {
  stroke: #fff;
  transition: stroke 0.2s ease;
}

.nav-group .nav-item.active .sidebar-icons > svg path {
  stroke: var(--brand-bg);
}

.rename-wrapper {
  display: flex;
  align-items: end;
}

.rename-wrapper > .row {
  display: flex;
  align-items: end;
  gap: 1rem;
}

.rename-wrapper > .row .inline .w-20vw {
  width: 20vw;
}

.update-buttons {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
}

label {
  font-size: 0.8rem;
}

.rename-btn {
  padding: 0.5rem !important;
  font-size: 0.95rem;
  background: #d0be86;
  border-radius: 8px;
}

.delete-btn {
  padding: 0.5rem !important;
  font-size: 0.95rem;
  background: #d08686;
  border-radius: 8px;
}

.table-container.sticky-under-header {
  max-height: none;
  height: auto;
  overflow: visible;
}
.holiday-modal.custom-modal-overlay .header,
.holiday-modal.custom-modal-overlay .actions {
  background: transparent !important;
}
.flex-none {
  flex: none !important;
}
.gender-btn.worker-management {
  color: var(--text);
}
.gender-btn.worker-management.active {
  background-color: var(--brand-bg);
  color: #fff !important;
}
select {
  border-bottom: 1px solid var(--input-border) !important;
}
.overflow-visible {
  overflow: visible !important;
}
.log-custom-select > option {
  padding-right: 1rem !important;
}
.svg-btns.icon-small-svg > svg {
  width: 1.45rem;
  height: 1.45rem;
}
.selectize-control .selectize-input {
  border: 1px solid var(--brand-bg) !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}
.custom-date-picker-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
input[type="date"] {
  accent-color: var(--brand-bg);
}
.calendar-day.selected {
  background-color: #2f6a56;
  color: white;
  border-radius: 50%;
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
  background-color: var(--brand-bg);
  border-color: 1px solid var(--brand-bg);
  color: #fff;
}
.daterangepicker .ranges li {
  color: var(--text);
}
.range_inputs .applyBtn.ui.compact.small.button.primary {
  background-color: var(--brand-bg) !important;
  border-color: var(--brand-bg) !important;
  color: #fff !important;
  padding: 0.1rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.ui.secondary.button,
.ui.secondary.buttons .button {
  background-color: #8a938d !important;
  color: #fff !important;
  padding: 0.1rem;
  border-radius: 0.2rem;
  cursor: pointer;
}
.selectize-align-bottom .selectize-control {
  display: flex;
  align-items: flex-end;
}
.selectize-align-bottom .selectize-control .selectize-input.items {
  padding: 0.4rem !important;
}
.calendar_head {
  background: var(--brand-bg);
}
.ui.pagination.menu {
  background: var(--white) !important;
}
.ui.pagination.menu .item {
  color: var(--text);
}
.ui.pagination.menu .item.active {
  color: var(--brand-bg);
}
html[data-theme="dark"] .ui.pagination.menu .item.active {
  color: #ffffff;
  background: var(--brand-bg);
}
.osx10_7 ._contextmenu_screen_ > cmenu {
  width: 10vw;
  padding: 0.7rem;
}
.close-sidebar .avatar {
  -webkit-mask-image: url(/images/colapse-sidebar.svg);
  mask-image: url(/images/colapse-sidebar.svg);
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}
.close-sidebar .sidebar-footer .logout {
  -webkit-mask-image: url(/images/logout.svg);
  mask-image: url(/images/logout.svg);
  display: inline-block;
  width: 1.3rem;
  height: 1.3rem;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.2s ease;
}
.download-excel {
  border: none;
  background: none;
}
html[data-theme="dark"] .download-excel img {
  filter: brightness(0) invert(1);
}
/* Compact layout for screens with constrained height (e.g. 1366x528) */
@media (max-height: 600px) {
  .main {
    padding: 1.2vh 1.036vw !important;
  }

  .topbar {
    margin-bottom: 0.6rem !important;
  }

  .custom-tab-menu,
  .tabular.menu {
    min-height: 40px !important;
    margin-bottom: 0.6rem !important;
  }

  .custom-tab-item,
  .custom-tab-menu .item,
  .tabular.menu .item {
    padding: 0.5rem 1rem !important;
    font-size: 0.88rem !important;
  }

  .custom-tab-menu,
  .tabular.menu {
    margin-bottom: 0rem !important;
  }
}

@media (max-width: 1500px) {
  .main {
    padding: 2.846vh 0.836vw !important;
  }
}

@media (max-width: 1366px) {
  .section-table thead th {
    font-size: 0.9rem;
  }

  .sml-btn {
    font-size: 1rem;
  }

  .three-dots-icon {
    padding: 0.5rem;
  }

  .bottom-btns .main-button {
    font-size: 0.8rem;
    padding: 0.6rem 1.4rem;
    gap: 0.7rem;
  }

  .bottom-btns .clear-button {
    font-size: 0.8rem;
    padding: 0.6rem 1.4rem;
    gap: 0.7rem;
  }

  .section-table tbody td {
    padding: 1.562vh 1.562vh;
  }

  .table-container.max-h-76 {
    max-height: 70vh;
  }

  .fake-toggle span {
    width: 40px;
    height: 20px;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  .create-btn {
    font-size: 1rem !important;
    padding: 0.6rem 1.5rem !important;
  }

  .holiday-month-card {
    min-height: 85px;
  }

  .bottom-btns-svg {
    height: 1.2rem;
    width: 1.2rem;
  }

  .section-table tbody td {
    font-size: 0.9rem;
  }

  .toggle,
  .ui.checkbox.toggle,
  .ui.checkbox .toggle {
    width: 60px;
  }

  .toggle label:before,
  .ui.checkbox.toggle label:before,
  .ui.checkbox .toggle label:before {
    width: 2.5rem !important;
  }

  .brand-text {
    gap: 0.1rem;
  }

  .brand-text .name-container .name {
    font-size: 1.2rem;
  }

  .inner-nav-menu a {
    font-size: 0.9rem;
  }

  .svg-btns {
    height: 1.3rem;
    width: 1.3rem;
  }

  .avatar {
    min-height: 2.5rem;
    max-height: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
  }
  .right_panel_con {
    padding: 0 5px;
  }
  .nav-item {
    font-size: 0.9rem;
    padding: 1.002vh 0.732vw;
  }
  .sidebar-icons {
    width: 1.2rem;
    height: 1.2rem;
  }
  .nav .nav-subitem {
    font-size: 0.8rem;
    padding: 0.5rem 0.732vw;
  }

  .nav-item.has-child.open + .subnav {
    max-height: 100%;
  }

  .table-container.user-management {
    min-height: 75vh;
    max-height: 75vh;
  }

  .change-password {
    font-size: 0.9rem;
  }
  input[type="time"] {
    padding: 0.2rem !important;
  }
  .logout {
    font-size: 0.9rem;
  }

  .open-sidebar {
    padding: 1.104vh 0.464vw;
  }

  .sidebar-footer-right {
    gap: 0;
    justify-content: space-around;
  }

  .donut {
    width: 25rem;
    height: 25rem;
  }

  .donut::after {
    width: 13rem;
    height: 13rem;
  }

  .company-form {
    padding: 1rem;
  }
  .custom-form-control {
    height: 30px;
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  .cutoffs input[type="time"],
  select,
  .custom-select {
    font-size: 0.85rem !important;
    padding: 0.45rem !important;
  }
  .open-sidebar {
    width: 18vw;
  }
  label {
    font-size: 0.87rem;
  }

  .btn-update,
  .btn-reset {
    padding: 0.58rem 2.9rem;
    font-size: 1.1rem;
  }

  .input-checkbox > label {
    margin-bottom: 0;
  }

  .nav-tab-item {
    font-size: 0.9rem;
  }

  .title {
    font-size: 1.5rem;
  }

  .empty-state-title {
    font-size: 1.35rem;
  }

  .empty-state-desc {
    font-size: 0.95rem;
  }

  .empty-state-action {
    font-size: 0.95rem;
  }
  .holiday-nav-bar {
    padding: 0.65rem 1.75rem;
    margin-bottom: 0.85rem;
  }
  .holiday-nav-title {
    font-size: 1.55rem;
  }
  .holiday-nav-btn {
    width: 32px;
    height: 32px;
  }
  .holiday-months-grid {
    gap: 1.05rem;
  }
  .holiday-month-card {
    padding: 0.55rem;
    justify-content: space-around;
  }
  .holiday-month-card-header {
    margin-bottom: 0.25rem;
  }
  .dp-btn-full {
    height: 30px !important;
  }
  .holiday-month-toolbar {
    margin-bottom: 0;
  }
  .holiday-calendar-wrapper {
    padding: 0.45rem;
  }
  .holiday-day-cell {
    min-height: 65px;
  }
  .holiday-date-number {
    font-size: 0.95rem;
  }
  .custom-tab-content,
  .tab.segment {
    padding: 0.8rem;
  }
  .selectize-dropdown.single {
    font-size: 0.85rem !important;
  }
  tr.shift-table-input td > input {
    padding: 0.3rem !important;
    font-size: 0.9rem !important;
  }
  .selectize-control .selectize-input {
    padding: 0.4rem !important;
  }
  .svg-btns.icon-small-svg > svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .form-util-form {
    gap: 0.2rem !important;
  }
  .inner-sub-form {
    padding: 6px !important;
    border: none !important;
  }

  .selectize-control.single .selectize-input,
  .selectize-dropdown.single {
    padding: 0.4rem !important;
  }
  .fetch-btn.laptop-screen-padding {
    padding: 7px 12px;
    margin-bottom: 0.4rem;
  }
}

@media (max-width: 1024px) {
  .main {
    padding: 1.746vh 1.136vw;
  }

  .stat-card {
    padding: 0.662vh 0.525vw;
  }

  .sidebar {
    width: 6vw;
    min-width: 4rem;
  }

  .sidebar:has(.open-sidebar:not(.close)) {
    width: auto;
    min-width: 260px;
  }

  .open-sidebar {
    width: 25vw;
    min-width: 260px;
    max-width: 85vw;
  }

  .open-sidebar.close {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }

  .close-sidebar {
    width: 6vw;
    min-width: 4rem;
  }

  .close-sidebar .brand .avatar {
    cursor: pointer;
  }

  .close-sidebar .brand .avatar > span {
    display: none;
  }

  .close-sidebar .brand .avatar > img {
    display: block !important;
    cursor: pointer;
  }

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

  [ui-view="main"] {
    padding: 0.5rem;
  }

  .donut {
    height: 20rem;
    width: 20rem;
  }

  .btn {
    padding: 0.642vh 0.879vw;
  }

  .top-actions .btn {
    font-size: 1.1rem;
  }

  .donut::after {
    height: 10rem;
    width: 10rem;
  }

  .table-card {
    padding: 2.344vh 0;
    height: auto;
  }

  .section-table tbody td {
    padding: 0.062vh 0.52vw;
  }

  .section-table thead th,
  .section-table thead th:last-child,
  .section-table thead th:first-child {
    padding: 0.502vh 0.732vw;
  }

  .table-container.user-management {
    height: auto;
    min-height: auto;
    max-height: auto;
  }

  .close-sidebar .nav-item {
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
  }

  .open-sidebar .nav-item {
    padding: 0.902vh 0.732vw;
    gap: 1.632vw;
    align-items: center;
  }

  .open-sidebar .nav-item i {
    width: 1.5rem;
  }

  .close-sidebar .sidebar-footer .logout {
    height: 2.5rem;
    width: 2.5rem;
  }

  .sidebar-footer {
    flex-direction: column;
    padding-top: 0.7vh;
    gap: 0.4rem;
  }

  .open-sidebar .sidebar-footer-right {
    width: 100%;
  }

  .open-sidebar .sidebar-footer-right .logout {
    width: 70%;
  }

  .app:has(.open-sidebar:not(.close)) .content-grid {
    grid-template-columns: 1fr;
  }

  .section-table tbody td.user-name {
    min-width: 170px;
  }

  .section-table tbody td.books-list {
    min-width: 300px;
    max-width: 300px;
  }

  .section-table tbody td.action-btns {
    min-width: 150px;
  }

  .table-container {
    flex: none;
  }

  .custom-tab-content.tab.segment.file-upload-tab .tiny.images {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-tab-content.tab.segment.file-upload-tab .tiny.images img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
  }

  .table-container {
    border-radius: 8px;
  }

  .topbar {
    margin-bottom: 0;
    flex-wrap: wrap;
  }

  .inner-nav-menu a {
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .top-header-right {
    flex-wrap: wrap;
  }

  .table-container {
    min-width: 1024px;
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .app:has(.open-sidebar:not(.close)) .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Mobile Navbar Styles */
.mobile-navbar {
  display: none;
}

@media (max-width: 600px) {
  .mobile-navbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--sidebar-bg);
    color: var(--white);
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    z-index: 1000;
    border-bottom: 1px solid var(--white-12);
  }

  .mobile-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-name {
    font-weight: 700;
    font-size: 1.05rem;
  }

  .mobile-last-login {
    font-size: 0.75rem;
    color: #a0b5ae;
  }

  .hamburger-btn {
    background: transparent;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
  }

  .hamburger-btn svg {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none;
  }

  .hamburger-btn svg path {
    fill: var(--white, #ffffff) !important;
  }

  /* Hide normal sidebars */
  .close-sidebar {
    display: none !important;
  }

  .sidebar {
    min-width: 0 !important;
    width: 0 !important;
  }

  .open-sidebar.close {
    display: none !important;
  }

  /* Style open sidebar as an absolute overlay */
  .open-sidebar:not(.close) {
    display: flex !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    z-index: 999 !important;
    flex-direction: column !important;
    background: var(--sidebar-bg) !important;
    padding: 0.5rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
  }

  .open-sidebar:not(.close) .brand {
    display: none !important;
  }

  .main {
    padding-top: 80px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 2rem !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .stats .stat-card {
    width: 100%;
    padding: 0.75rem 0 0.6rem 0.6rem;
    gap: 0.5rem;
    box-sizing: border-box;
  }

  .stat-card .icon {
    width: 3rem;
    height: 3rem;
    font-size: 1rem;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .stat-card .meta .label {
    font-size: 0.75rem;
  }

  .stat-card .meta .value {
    font-size: 1.15rem;
  }

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

  .chart-inner {
    max-width: none;
  }

  .open-sidebar:not(.close) .nav-group .nav-item {
    font-size: 1.15rem;
    padding: 1.802vh 2.632vw;
  }

  .company-form {
    max-height: 78vh;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 375px) {
  .company-form {
    max-height: 70vh;
  }
}