.jvm-zoom-btn.jvm-zoomin,
.jvm-zoom-btn.jvm-zoomout {
  top: 10px;
  background: #d1d5db;
  color: #111827;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
}

.slick-dots {
  display: flex !important;
}

.fc-toolbar-title {
  font-size: 24px !important;
  font-weight: 600;
}

.fc-button {
  border-color: var(--primary-600) !important;
  background: #fff !important;
  color: var(--primary-600) !important;
  font-weight: 600 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 80px !important;
}

.fc-button:hover {
  background-color: var(--primary-50) !important;
}

.fc-button-active {
  color: #fff !important;
  background-color: var(--primary-600) !important;
}

.fc-button-active:hover {
  color: #fff !important;
  background-color: var(--primary-600) !important;
}

.fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none !important;
}

.fc-toolbar-chunk {
  display: flex !important;
}

.fc .fc-button-primary:focus {
  box-shadow: none !important;
}

.fc-h-event {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-h-event .fc-event-main {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-v-event .fc-event-main {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-daygrid-day-number {
  transition: background-color 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border-radius: 50%;
}

.fc-daygrid-day:hover .fc-daygrid-day-number {
  background-color: var(--primary-100) !important;
  color: var(--primary-600) !important;
  transition: background-color 0.2s;
}

.slider-progress .active {
  transition: all 0.3s linear;
}

.slick-list {
  margin: 0 -7px;
}

.slick-slide > div {
  padding: 0 10px;
}

.center-gap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-grid {
  display: inline-grid;
}

.image-upload__boxInner.custom {
  display: flex;
  justify-content: center;
  align-items: center;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: unset !important;
}

/* Hide all submenus by default */
.sidebar-submenu {
  /* display: none; */
  list-style: none;
  padding-left: 20px;
  /* Adjust as needed */
}

.sidebar-menu .sidebar-submenu {
  display: block;
}

/* Optional: Add transition for smooth toggle */
.sidebar-menu .dropdown .sidebar-submenu {
  transition: max-height 0.3s linear;
  overflow: hidden;
  max-height: 0px;
}

/* Fixed, generous cap instead of a JS-computed scrollHeight: the submenu's
   real height depends on things that finish rendering/loading after the
   dropdown is opened (e.g. async Iconify icons), so a value measured too
   early clips items that render taller than expected (bug: last submenu
   item, e.g. "Lista de Funcionários", getting cut off/hidden). This value
   only needs to exceed the tallest submenu's natural height. */
.sidebar-menu .dropdown.open .sidebar-submenu {
  max-height: 2000px;
}

.sidebar-menu li > a > i {
  margin-inline-end: 0;
}

.mr-10 {
  margin-right: 10px !important;
}

.sidebar-menu .sidebar-submenu li a {
  gap: 12px;
}

/* === Selected menu item: yellow/blue logo contrast ===
   Blue background (--primary-600) is the base already used by the theme;
   the yellow accent (--secondary-color-600) — the logo's other brand
   color — is added as a left border + icon tint so the active item reads
   clearly against the rest of the (unselected, gray-text) menu. */
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a,
.sidebar-menu li > a.active-page {
  background-color: var(--primary-600);
  color: #fff;
  border-inline-start: 3px solid var(--secondary-color-600);
}

.sidebar-menu li.dropdown.open > a .menu-icon,
.sidebar-menu li.dropdown.dropdown-open > a .menu-icon,
.sidebar-menu li.dropdown.open > a i,
.sidebar-menu li.dropdown.dropdown-open > a i,
.sidebar-menu li > a.active-page .menu-icon,
.sidebar-menu li > a.active-page i {
  color: var(--secondary-color-600);
}

.sidebar-menu li > a.active-page:hover,
.sidebar-menu li.dropdown.open > a:hover,
.sidebar-menu li.dropdown.dropdown-open > a:hover,
.sidebar-menu .sidebar-submenu li > .active-page:hover {
  /* Background stays blue here (selected item) — text must stay white,
     never the dark var(--text-primary-light) the generic hover rule
     above would otherwise apply, which was unreadable on blue. */
  color: #fff;
}

/* === Submenus: transparency + glow on the selected item ===
   The dropdown panel gets a soft translucent blue wash instead of a flat
   fill, and the selected item picks up a yellow glow so the logo's two
   brand colors stay visible even one level down. Hover is untouched. */
.sidebar-menu .sidebar-submenu {
  background-color: rgba(37, 62, 135, 0.05);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sidebar-menu .sidebar-submenu li > .active-page {
  background-color: rgba(37, 62, 135, 0.85);
  color: #fff;
  border-inline-start: 3px solid var(--secondary-color-600);
  box-shadow: 0 0 14px rgba(237, 195, 71, 0.55);
}
.me-8 {
  margin-right: 8px;
}

.gap-10 {
  display: flex;
  gap: 8px;
}

.w-33 {
  width: 33.33%;
}

.overlay::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.65;
  transition: all 0.3s;
  z-index: 2;
}

.overlay.active::after {
  width: 100%;
}

/* === brand colors: align Bootstrap buttons/links with the SGE-PRO palette === */
/* Bootstrap's default nav-pills active tab is its own blue (#0d6efd), which
   has nothing to do with the app's identity — override the variables it
   reads instead of fighting specificity. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--primary-600);
  --bs-nav-pills-link-active-color: #fff;
}


.btn-primary {
  --bs-btn-bg: var(--primary-600) !important;
  --bs-btn-border-color: var(--primary-600) !important;
  --bs-btn-hover-bg: var(--primary-700) !important;
  --bs-btn-hover-border-color: var(--primary-700) !important;
  --bs-btn-active-bg: var(--primary-800) !important;
  --bs-btn-active-border-color: var(--primary-800) !important;
  --bs-btn-disabled-bg: var(--primary-600) !important;
  --bs-btn-disabled-border-color: var(--primary-600) !important;
  --bs-btn-focus-shadow-rgb: 37, 62, 135;
}

/* Logo-accent icon (yellow, --secondary-color-600 — same contrast color as
   the logo, not literal orange): no border/box-shadow on the button itself —
   only the icon is tinted, slightly enlarged and given a glow so it stands
   out against the blue button background. */
.btn-primary .menu-icon,
.btn-primary > svg,
.btn-primary > .iconify,
.btn-primary-600 .menu-icon,
.btn-primary-600 > svg,
.btn-primary-600 > .iconify,
.btn-primary i,
.btn-primary-600 i {
  color: var(--secondary-color-600);
  font-size: 1.15em;
  filter: drop-shadow(0 0 3px rgba(237, 195, 71, 0.6));
}

/* Secondary (yellow) brand accent */
.btn-secondary-color {
  background-color: var(--secondary-color-600);
  border-color: var(--secondary-color-600);
  color: var(--dark-2);
}

.btn-secondary-color:hover {
  background-color: var(--secondary-color-700);
  border-color: var(--secondary-color-700);
  color: var(--dark-2);
}

.btn-secondary-color:active,
.btn-secondary-color:focus {
  background-color: var(--secondary-color-800) !important;
  border-color: var(--secondary-color-800) !important;
  color: var(--dark-2) !important;
}

.text-secondary-color {
  color: var(--secondary-color-600) !important;
}

.bg-secondary-color {
  background-color: var(--secondary-color-600) !important;
}

.border-secondary-color {
  border-color: var(--secondary-color-600) !important;
}

/* Sem ligação à internet: bloqueia os botões de acção (ver MasterLayout.jsx
   e src/hook/useOnlineStatus.js) para evitar submissões que iriam falhar. */
.app-offline .btn,
.app-offline button[type="submit"],
.app-offline input[type="submit"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Compact list/data tables (`.bordered-table`, used across every Lista*
   page): keep Bootstrap's `.table { width: 100% }` so the table always
   spans exactly the same width as the filters row above it (both are
   direct children of the same `.card-body`) — don't shrink-wrap it to its
   content. Within that fixed 100%, the default `table-layout: auto`
   already gives each column a share proportional to its own content
   (a column with long values gets more of the row, a short one gets less)
   instead of splitting evenly, and that split keeps rescaling as the
   viewport narrows. The only thing standing in the way is this class's own
   `min-width: max-content` (style.css), which pins the table to its full
   content width and forces a horizontal scrollbar instead of letting
   columns shrink — overridden back to `0` here (extra.css loads after
   style.css, so it wins at equal specificity) so columns actually shrink,
   wrapping their text onto more lines if the viewport gets narrow enough.
   Cell padding is also trimmed down from style.css's 16px to cut row
   height. */
.bordered-table {
  min-width: 0;
}

.bordered-table thead tr th,
.bordered-table tbody tr td {
  padding: 10px 12px !important;
}

/* Striped rows: style.css hard-codes every `.bordered-table` cell to
   `var(--white)` (!important), so overriding it needs the same !important
   plus a selector specific enough to win — tbody + tr:nth-child + td beats
   its tbody + tr + td. */
.bordered-table tbody tr:nth-child(even) td {
  background-color: var(--neutral-50) !important;
}