/* ------------------------------
   Global Transitions & Body Styles
------------------------------ */
/* Font Families */
body.font-default {
  /* font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; */
  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: 0.2px;
}

body.font-monospace {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.2px;
}

body.font-serif {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.2px;
}

body.font-georgia {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 0.2px;
}

body.font-poppins {
  font-family: 'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.2px;
}

body.font-montserrat {
  font-family: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.2px;
}

body.font-roboto {
  font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.2px;
}

body.font-lato {
  font-family: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.2px;
}

body.font-cursive {
  font-family: cursive, 'Comic Sans MS', 'Apple Chancery', sans-serif;
  letter-spacing: 0.2px;
}



/* 繁體字體 */
body.font-noto-tc {
  font-family: 'Noto Sans TC', sans-serif;
}

body.font-cwtex-kai {
  font-family: 'cwTeX Kai', serif;
}

body.font-cwtex-ming {
  font-family: 'cwTeX Ming', serif;
}

body.font-pingfang {
  font-family: 'PingFang TC', sans-serif;
}

body.font-pmingliu {
  font-family: 'PMingLiU', serif;
}

/* 簡體字體 */
body.font-noto-sc {
  font-family: 'Noto Sans SC', sans-serif;
}

body.font-dengxian {
  font-family: 'DengXian', sans-serif;
}

body.font-yahei {
  font-family: 'Microsoft YaHei', sans-serif;
}

body.font-simhei {
  font-family: 'SimHei', sans-serif;
}

body.font-simsun {
  font-family: 'SimSun', serif;
}

body.font-fangsong {
  font-family: 'FangSong', serif;
}

.navbar-bottom-line {
  border-bottom: 2px solid #EC0B0B;
}

.LTE_CASHIER_AGENT_navbar-bottom-line {
  border-bottom: 2px solid #0bece1;
}

.LTE_BILLING_navbar-bottom-line {
  border-bottom: 2px solid #F28B82;
}

.LTE_BILLING_2_navbar-bottom-line {
  border-bottom: 2px solid #FBBC04;
}

.LTE_BOOKING_PLAN_navbar-bottom-line {
  border-bottom: 2px solid #34A853;
}

.LTE_CASHIER_AGENT_navbar-bottom-line {
  border-bottom: 2px solid #A8E6A1;
}

.LTE_CREATE_INV_navbar-bottom-line {
  border-bottom: 2px solid #42A5F5;
}

.LTE_CREATE_PO_navbar-bottom-line {
  border-bottom: 2px solid #AB47BC;
}

.LTE_CREATE_SO_navbar-bottom-line {
  border-bottom: 2px solid #26C6DA;
}

.LTE_CRM_CONSIGNEE_DASHBOARD_navbar-bottom-line {
  border-bottom: 2px solid #FFA726;
}

.LTE_CRM_MY_CENTER_AGENT_navbar-bottom-line {
  border-bottom: 2px solid #8D6E63;
}

.LTE_CRM_MY_CENTER_CONSIGNEE_navbar-bottom-line {
  border-bottom: 2px solid #5C6BC0;
}

.LTE_PO_CENTER_navbar-bottom-line {
  border-bottom: 2px solid #A8E6A1;
}

.LTE_SO_CENTER_navbar-bottom-line {
  border-bottom: 2px solid #ADD8E6;
}

.LTE_INV_CENTER_navbar-bottom-line {
  border-bottom: 2px solid #003366;
}

/* View Modes */
body.view-cozy {
  font-size: 1rem;
}

body.view-compact {
  font-size: 0.85rem;
}

body.view-comfortable {
  font-size: 1.25rem;
}

/* Ensure navbar adapts to dark mode */
body.dark-mode .main-header.navbar {
    background-color: #454d55;  /* dark background */
    color: #f1f1f1;          /* light text */
    border-bottom: 1px solid #444; /* subtle bottom line */
}


/* ------------------------------
   Settings Sidebar Styles
------------------------------ */
#settingsSidebar {
  width: 280px;
  height: 100vh;
  z-index: 1050;
  background: #fff;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
  border-left: 1px solid #e0e0e0;
  position: fixed;
  top: 0;
  right: -300px;
  transition: right 0.3s ease-in-out;
  overflow-y: auto;
  display: none;
}

#settingsSidebar.open {
  right: 0;
}

.setting_label_switch {
  margin-left: 1.5rem;
}

/* Better label spacing and alignment */
.setting_label_switch label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ------------------------------
   Hover Dropdown Support
------------------------------ */
.dropdown-hover:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* ------------------------------
   Switch Feedback Icons
------------------------------ */
.toggle-icon {
  color: #6c757d;
  transition: color 0.2s ease;
}

.form-check-input:checked+.form-check-label .toggle-icon {
  color: #0d6efd;
}


/* ------------------------------
   Responsive Adjustments
------------------------------ */
@media (max-width: 768px) {
  #settingsSidebar {
    width: 100%;
    right: -100%;
  }

  #settingsSidebar.open {
    right: 0;
  }
}

/* Highlight icons when the toggle is active */
.toggle-icon {
  color: #6c757d;
  /* default gray */
  transition: color 0.2s ease;
}


.form-check-input:checked+.form-check-label .toggle-icon {
  color: #0d6efd;
  /* Bootstrap primary color */
}

body.dark_mode a {
  color: #90caf9;
}

body.dark_mode a:hover {
  color: #64b5f6;
}

body.dark_mode .card,
body.dark_mode .dropdown-menu,
body.dark_mode #settingsSidebar {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
  box-shadow: none;
}

/* Sidebar adjustments */
body.dark_mode #settingsSidebar {
  border-left: 1px solid #333;
}

/* Tabs */
body.dark_mode .nav-tabs .nav-link {
  background-color: transparent;
  border-color: #333;
  color: #ccc;
}

body.dark_mode .nav-tabs .nav-link.active {
  background-color: #2c2c2c;
  color: #fff;
  border-color: #444 #444 #2c2c2c;
}

/* Tables */
body.dark_mode table {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark_mode btn-close {
  color: #f1f1f1;
}

body.dark_mode table thead {
  background-color: #2a2a2a;
  color: #f1f1f1;
}

body.dark_mode table tbody tr:nth-child(even) {
  background-color: #2c2c2c;
}

/* Switch and toggle icon adjustments */
body.dark_mode .toggle-icon {
  color: #bbb;
}

body.dark_mode .form-check-input:checked+.form-check-label .toggle-icon {
  color: #42a5f5;
}

/* Scrollbars (optional for WebKit browsers) */
body.dark_mode ::-webkit-scrollbar {
  width: 10px;
}

body.dark_mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark_mode ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

body.dark_mode ::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.high-contrast-buttons .btn {
  background-color: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}

.high-contrast-buttons .btn:hover {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
}


.big-cursor * {
  cursor: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/mouse-pointer.svg'), auto;
}

.big-cursor body {
  cursor: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/mouse-pointer.svg'), auto;
}

/* Dark mode + big cursor */
.dark_mode.big-cursor {
  background-color: #121212;
  /* Dark background */
  color: #ffffff;
  /* Light text */
  cursor: url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/svgs/solid/mouse-pointer.svg'), auto;
}

/* Ensure all child elements inherit the cursor */
.dark_mode.big-cursor * {
  cursor: inherit;
}

/* Light mode close icon (black) */
.btn-close_setting {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.146.146a.5.5 0 0 1 .708 0L8 7.293l7.146-7.147a.5.5 0 0 1 .708.708L8.707 8l7.147 7.146a.5.5 0 0 1-.708.708L8 8.707l-7.146 7.147a.5.5 0 0 1-.708-.708L7.293 8 .146.854a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: none;
  width: 1em;
  height: 1em;
  opacity: 0.5;
  cursor: pointer;
}

.btn-close_setting:hover {
  opacity: 0.75;
}

/* Dark mode close icon (white) */
.dark_mode .btn-close_setting {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.146.146a.5.5 0 0 1 .708 0L8 7.293l7.146-7.147a.5.5 0 0 1 .708.708L8.707 8l7.147 7.146a.5.5 0 0 1-.708.708L8 8.707l-7.146 7.147a.5.5 0 0 1-.708-.708L7.293 8 .146.854a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}


#reading-mask-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

#reading-mask-overlay::before,
#reading-mask-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

#reading-mask-overlay.active::before {
  top: 0;
}

#reading-mask-overlay.active::after {
  bottom: 0;
}

body.reading-mask-active #reading-mask-overlay {
  display: block;
}


#reading-guide-line {
  position: fixed;
  width: 100%;
  height: 2px;
  background-color: red;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

body.reading-guide-active #reading-guide-line {
  display: block;
}