*,
*::before,
*::after {
  box-sizing: border-box;hr.css

  margin: 0;
  padding: 0;
}

:root {
  --primary: #00b894;
  --primary-dark: #00916e;
  --accent: #6366f1;
  --danger: #ef4444;
  --header-bg: #111827;
  --sidebar-bg: #f4f5fb;
  --card-bg: #ffffff;
  --body-bg: #f3f4f6;
  --text-main: #111827;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.12);
  --transition-fast: 0.2s ease;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: var(--body-bg);
  color: var(--text-main);

  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* LAYOUT PRINCIPAL */

.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  height: auto;
  transition: grid-template-columns 0.25s ease;
}

/* SIDEBAR */

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: 0px 1fr;
}

.app-shell.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
}

.app-shell.sidebar-collapsed .sidebar * {
  opacity: 0;
  pointer-events: none;
}

/* LOGO SIDEBAR */

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center; /* <— aqui */
  padding: 8px 0 14px;     /* opcional: mais respiro em baixo */
}

.logo-image {
  max-width: 150px; /* antes 180px */
  width: 100%;
  height: auto;
  display: block;
}

/* ⬇️ Até 1280px (portáteis “normais”) */
@media (max-width: 1280px) {
  .logo-image {
    max-width: 140px;
  }
}

/* ⬇️ Até 1024px (portáteis pequenos / tablets na horizontal) */
@media (max-width: 1024px) {
  .logo-image {
    max-width: 130px;
  }
}

/* ⬇️ Até 768px (tablet vertical / mobile com sidebar aberta) */
@media (max-width: 768px) {
  .logo-image {
    max-width: 110px;   /* já tinhas algo assim – mantém aqui */
  }

  .sidebar-logo {
    padding: 8px 0 12px;  /* um pouco menos de altura no mobile */
  }
}
/* 1) Nenhum padding vertical genérico nas abas */
.tab-panel {
  padding-top: 0;
}

/* 2) NÃO mexer nas tabs em si – deixa sem margin extra */
.tabs-colab,
.tabs-dep {
  margin-bottom: 0;
}

/* 3) Espaço entre as tabs e o CONTEÚDO da aba
      – aplica-se ao primeiro .panel-header OU .card
      dentro de cada .tab-panel
*/
.tab-panel > .panel-header:first-child,
.tab-panel > .card:first-child {
  margin-top: 16px;   /* mesmo “respiro” que tens em Comunicados */
}

/* 4) Escala de serviço: NÃO leva esse espaço extra */
#tab-escala > .panel-header:first-child {
  margin-top: 0;
}

/* 5) Escala continua com scroll horizontal só na tabela */
#tab-escala .table-wrapper.no-shadow {
  overflow-x: auto;
}

/* texto / navegação */

.sidebar-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-main);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover {
  background: rgba(0, 184, 148, 0.08);
}

.nav-link.active {
  background: var(--primary);
  color: #fff;
}

.sidebar-footer {
  margin-top: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.sidebar-copy {
  display: block;
  margin-top: 8px;
}

/* MAIN + TOPBAR */

.main {
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 56px;
  background: var(--header-bg);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

/* Estilo geral para botões secundários (Cancelar, Repor filtros, etc.) */
.btn-ghost {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-fast), border var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-ghost:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
  color: #111827;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}
/* Variante específica para o botão da topbar (fundo escuro) */
.topbar .btn-ghost {
  border: 1px solid rgba(249, 250, 251, 0.1);
  background: transparent;
  color: #e5e7eb;
}

.topbar .btn-ghost:hover {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(249, 250, 251, 0.25);
  color: #f9fafb;
  box-shadow: none;
}


.search-box {
  flex: 1;
}

.search-box input {
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 13px;
}

.user-role {
  font-size: 11px;
  color: #9ca3af;
}

/* CONTENT */

.content {
  padding: 20px 26px 30px;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.page-header h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.page-header p {
  font-size: 13px;
  color: var(--text-muted);
}

/* KPI Grid */

.kpi-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.kpi-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* Tabs */

.tabs {
  display: inline-flex;
  margin-top: 24px;
  padding: 4px;
  border-radius: 999px;
  background: #e5e7eb;
  gap: 4px;
}

.tab-button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: #4b5563;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tab-button.active {
  background: #fff;
  color: var(--primary-dark);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

/* Panels */

.tab-panel {
  display: none;
  margin-top: 18px;
}

.tab-panel.active {
  display: block;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.panel-header h2 {
  font-size: 16px;
}

.btn-primary {
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 184, 148, 0.4);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* Tabelas */

.table-wrapper {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 10px 14px;

  /* 🔓 NENHUM scroll interno – altura cresce sempre */
  overflow: visible !important;
  max-height: none !important;
}

/* quando usas .no-shadow não herdar nada estranho */
.table-wrapper.no-shadow {
  box-shadow: none;
  overflow: visible !important;
  max-height: none !important;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead tr {
  border-bottom: 1px solid var(--border-color);
}

th,
td {
  padding: 8px 6px;
  text-align: left;
}

th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

tbody tr:hover {
  background: #f9fafb;
}

.badge {
  font-size: 11px;
  border-radius: 999px;
  padding: 4px 8px;
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #047857;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.11);
  color: #b91c1c;
}

.btn-link {
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
}

/* MODAL */

.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1000;
}

.modal-backdrop.open,
.modal-backdrop.show {
  display: block;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--card-bg);
  border-radius: 24px;
  width: min(980px, 100% - 32px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.modal-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 10px;
  border-bottom: 1px solid var(--border-color);
  background: inherit;
  z-index: 1;
}

.modal-header h3 {
  font-size: 18px;
}

#form-colaborador {
  padding: 14px 22px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  padding: 10px 22px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: inherit;
  z-index: 1;
}

/* Mobile: modal em ecrã completo */
@media (max-width: 768px) {
  .modal {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* FORMULÁRIO */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 10px;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.form-group label {
  font-size: 12px;
  color: var(--text-muted);
}

.form-group input,
.form-group select {
  border-radius: 999px;
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  background: #f9fafb;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.25);
}

/* ===============================
   RESPONSIVO
   =============================== */

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 220px 1fr;
  }
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .required {
    color: #ef4444;
    margin-left: 2px;
  }

  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 260px;
    height: calc(100vh - 56px);
    z-index: 40;
    box-shadow: 12px 0 30px rgba(15, 23, 42, 0.25);
    transform: translateX(-100%);
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .app-shell.sidebar-collapsed .sidebar {
    transform: translateX(0);
  }

  .app-shell.sidebar-collapsed .sidebar * {
    opacity: 1;
    pointer-events: auto;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-header,
  #form-colaborador,
  .modal-footer {
    padding-inline: 14px;
  }

  .logo-image {
    max-width: 110px;
  }
}

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

/* ======= menu de 3 pontinhos ======= */

.actions {
  position: relative;
  display: inline-block;
}

.btn-dots {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--accent);
  border-radius: 8px;
}

.btn-dots:hover {
  background: rgba(99, 102, 241, 0.08);
}

/* dropdown SOBREPOSTO a tudo – não aumenta a altura da tabela */
.actions-menu {
  position: absolute;
  right: 0;
  top: 28px;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 6px;
  display: none;
  z-index: 9999;   /* fica por cima de tabela, cards, etc */
}

.actions-menu.open {
  display: block;
}

.actions-menu .menu-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.actions-menu .menu-item:hover {
  background: #f3f4f6;
}

.actions-menu .menu-item.danger {
  color: var(--danger);
}

/* modal pequeno para confirmações */
.modal.modal-sm {
  width: min(460px, 100% - 32px);
  max-height: 70vh;
}

/* hr.css extra */

@keyframes soft-blink {
  0%, 100% { background-color: rgba(239,68,68,0.08); }
  50%      { background-color: rgba(239,68,68,0.18); }
}

tr.blink-danger {
  animation: soft-blink 2.2s ease-in-out infinite;
}

.contracts-alert {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  max-width: 520px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
  display: none;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .contracts-alert {
    left: 50%;
    right: auto;
    bottom: 16px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: none;
    text-align: center;
  }
}

.ferias-subtabs-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ferias-subtabs {
  display: inline-flex;
  border-radius: 999px;
  background: #e5e7eb;
  padding: 2px;
  margin-right: 8px;
}

.ferias-subtab-btn {
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  color: #4b5563;
}

.ferias-subtab-btn.active {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
  color: #111827;
}

.ferias-subtab-panel {
  display: none;
}

.ferias-subtab-panel.active {
  display: block;
}

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

.ferias-subtab-btn {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 4px 12px;
  font-size: 13px;
  background: #f9fafb;
  cursor: pointer;
}

.ferias-subtab-btn.active {
  background: #0f766e;
  color: #fff;
  border-color: #0f766e;
}

th.td-center,
td.td-center {
  text-align: center;
}
/* ====== FILTROS DE DATAS ====== */

.filter-bar {
  margin-top: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* antes: space-between */
  gap: 12px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.filter-group label {
  font-size: 12px;
  color: var(--text-muted);
}

/* 👉 aplica o mesmo estilo a date e month */
.filter-group input[type="date"],
.filter-group input[type="month"] {
  border-radius: 999px;
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  font-size: 12px;
  background: #f9fafb;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.filter-group input[type="date"]:focus,
.filter-group input[type="month"]:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.25);
}

.filter-sep {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-ghost-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
}
/* Filtro de salários – alinhado ao estilo das outras páginas */
#tab-salarios .filter-bar {
  justify-content: flex-start;   /* tudo encostado à esquerda */
  gap: 16px;
}

#filtro-salarios-mes {
  min-width: 150px;              /* largura parecida com os date inputs */
}
.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* botão de filtrar, alinhado ao tema */


.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* botão de filtrar, alinhado ao tema */
.btn-filter {
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 184, 148, 0.35);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-filter:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
#formConfigEmpresa {
  padding: 14px 22px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* Wrapper do campo setor */
#setorField {
  position: relative;
  width: 100%;
}
/* Filtros: select e input de texto/pesquisa com o mesmo "pill" */
.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="search"] {
  border-radius: 999px;
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  font-size: 12px;
  background: #f9fafb;
  outline: none;
  min-width: 140px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.filter-group select:focus,
.filter-group input[type="text"]:focus,
.filter-group input[type="search"]:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.25);
}

/* Dropdown claro estilo select */
#setor_atividade_dropdown.setor-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;

  background: #ffffff;                 /* branco */
  color: #111827;                      /* texto escuro */
  border: 1px solid #e5e7eb;           /* cinza suave */
  border-radius: 10px;

  padding: 6px;
  max-height: 260px;
  overflow-y: auto;

  z-index: 999999;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);

  opacity: 1 !important;
}

/* Itens */
#setor_atividade_dropdown .setor-item {
  color: #111827 !important;           /* preto */
  opacity: 1 !important;
  font-size: 14px;
  font-weight: 400;

  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;

  transition: background .12s ease, color .12s ease;
}

/* Hover / ativo (igual seleção do select) */
#setor_atividade_dropdown .setor-item:hover,
#setor_atividade_dropdown .setor-item.active {
  background: #2563eb;                 /* azul seleção */
  color: #ffffff !important;
}

/* Linha “sem resultados” */
#setor_atividade_dropdown .setor-item[style*="Sem resultados"] {
  background: transparent !important;
  color: #6b7280 !important;           /* cinza */
}
/* Dropdown custom do Setor (autocomplete) */
.setor-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  color: #111;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 9999;
}

.setor-item{
  padding: 8px 12px;
  cursor: pointer;
  background: #fff;
  color: #111;
  font-size: 14px;
}

.setor-item:hover,
.setor-item.active{
  background: #f2f4f7;
}

/* scrollbar clean */
#setor_atividade_dropdown::-webkit-scrollbar { width: 8px; }
#setor_atividade_dropdown::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}
#setor_atividade_dropdown::-webkit-scrollbar-track { background: transparent; }


/* ✅ BLINDAGEM: histórico tem de abrir sempre */
#modal-historico-despedidos {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1000;
}

/* quando abrir -> força visível */
#modal-historico-despedidos.open,
#modal-historico-despedidos.show {
  display: flex !important;          /* <— flex em vez de block */
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* garante que a modal interna renderiza */
#modal-historico-despedidos.open .modal,
#modal-historico-despedidos.show .modal {
  display: flex !important;
}
/* deixa o modal de abonos com layout igual ao de ausências */
#modal-movimento .form-grid{
  display: grid;
  grid-template-columns: 1fr;   /* 1 coluna */
  gap: 10px;
}

/* ✅ Salários: botões juntos e responsivos */
#tab-salarios .panel-header{
  justify-content: flex-start;  /* não espalhar */
  gap: 8px;                     /* espaço pequeno entre botões */
  flex-wrap: wrap;              /* quebra de linha em ecrãs pequenos */
}

#tab-salarios .panel-header h2{
  margin-right: auto;           /* empurra os botões para a direita */
}

/* garante que os botões não partem texto */
#tab-salarios .panel-header .btn-primary{
  white-space: nowrap;
}

/* mobile: botões mais compactos */
@media (max-width: 640px){
  #tab-salarios .panel-header{
    gap: 6px;
  }
  #tab-salarios .panel-header .btn-primary{
    padding: 6px 12px;
    font-size: 12px;
    box-shadow: 0 6px 14px rgba(0, 184, 148, 0.28);
  }
}
/* ========= HISTÓRICO DE CESSAÇÃO – PESQUISA ========= */

#modal-historico-cessacao .modal-toolbar-cessacao {
  padding: 8px 22px 6px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-start;   /* ou flex-end se quiseres à direita */
}

/* usa o mesmo “pill” do resto, mas com largura fixa e ícone */
#modal-historico-cessacao .search-box-modal {
  position: relative;
  max-width: 260px;
  width: 100%;
}

#modal-historico-cessacao .search-box-modal input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  padding: 8px 14px 8px 30px;   /* espaço extra para o ícone */
  font-size: 13px;
  background: #f9fafb;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease;
}

#modal-historico-cessacao .search-box-modal input:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.25);
}

/* ícone alinhado dentro do campo, tipo search moderno */
#modal-historico-cessacao .search-box-modal .icon-search {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}
/* ✅ Dropdown "Ativar" do Histórico de Cessação
   não pode ser cortado pelo container da modal */
#modal-historico-cessacao .modal {
  overflow: visible;          /* deixa o dropdown ultrapassar a área interna */
}

/* garante que o dropdown está sempre acima de linhas/cabeçalhos da tabela */
#modal-historico-cessacao .actions-menu {
  z-index: 99999;
}
/* GRID do formulário de responsáveis */
.form-grid-resp-dep {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
}

.form-grid-resp-dep .form-group-full {
  grid-column: 1 / -1;
}

/* DUAL LIST – COLABORADORES */
.dual-list {
  display: flex;
  align-items: stretch;   /* <— ocupa a mesma altura das listas */
  gap: 20px;
  width: 100%;
}

.dual-list-column {
  flex: 1;
  min-width: 0;
}

/* selects com aspecto “normal”, altura semelhante ao antigo */
.dual-list-select {
  width: 100%;
  min-height: 140px;
  max-height: 160px;
  box-sizing: border-box;
  font-size: 13px;
  padding: 4px;
  border-radius: 4px !important;   /* sem “pílula” gigante */
  border: 1px solid #d3dce6;
  background: #fff;
  overflow-y: auto;
}

/* texto totalmente visível */
.dual-list-select option {
  padding: 2px 4px;
  text-indent: 0;
  white-space: nowrap;
}

/* Botões de mover */
.dual-list-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* <— centra verticalmente */
  gap: 8px;
  margin-top: 0;            /* <— remove o desalinhamento */
  height: 100%;             /* acompanha a altura das listas */
}

.dual-list-actions .btn-secondary {
  width: 32px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Botão guardar a toda a largura */
.btn-full-width {
  width: 100%;
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .form-grid-resp-dep {
    grid-template-columns: 1fr;
  }

  .dual-list {
    flex-direction: column;
  }

  .dual-list-actions {
    flex-direction: row;
    justify-content: center;
    margin-top: 0;
    height: auto;
  }

  .dual-list-actions .btn-secondary {
    width: 40px;
    height: 28px;
  }
}
/* Ações do formulário (Anular + Guardar) */
.form-actions-resp-dep {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.form-actions-resp-dep .btn-primary,
.form-actions-resp-dep .btn-secondary {
  min-width: 140px;
}

/* Menu dos três pontinhos na tabela de departamentos */
.dep-action-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
  padding: 4px 0;
  z-index: 9999;
  min-width: 140px;
}

.dep-action-menu button {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #0f172a;
}

.dep-action-menu button:hover {
  background: #f3f4f6;
}
/* Botão secundário (Anular) – mesma “pill” do Guardar, mas cinza */
.btn-secondary {
  border: none;
  background: #e5e7eb;
  color: #374151;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(148, 163, 184, 0.45);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-secondary:hover {
  background: #d1d5db;
  color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.6);
}

/* Ações do formulário (Anular + Guardar) */
.form-actions-resp-dep {
  display: flex;
  justify-content: flex-end;  /* ambos à direita */
  gap: 12px;
  margin-top: 8px;
}

.form-actions-resp-dep .btn-primary,
.form-actions-resp-dep .btn-secondary {
  min-width: 140px;
  text-align: center;
}

/* Responsivo: em ecrãs pequenos os botões podem quebrar para 2 linhas */
@media (max-width: 640px) {
  .form-actions-resp-dep {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .form-actions-resp-dep .btn-primary,
  .form-actions-resp-dep .btn-secondary {
    width: 100%;
    max-width: 260px;   /* opcional, para não ficarem gigantes em tablets */
  }
}
/* Botão tipo "Ver recibo" para Candidatos */
.btn-table {
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 184, 148, 0.35);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-table:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}
#tbody-candidatos .actions {
  position: relative;
}

#tbody-candidatos .actions-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 9999; /* sobrepõe tudo dentro do modal */
  min-width: 140px;
}
/* Select da fase na tabela de candidatos */
#tbody-candidatos .cand-fase-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  min-width: 140px;
  height: 34px;
  padding: 0 32px 0 12px;

  border-radius: 999px;          /* mesmo look “pill” */
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;

  font-size: 12px;
  line-height: 1;
  cursor: pointer;

  /* seta do select no mesmo estilo do resto da app */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2314b8a6' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}

#tbody-candidatos .cand-fase-select:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.25);
}
/* modal grande – igual ao de Candidatos */
.modal.modal-lg {
  width: min(900px, 100% - 32px);
  max-height: 80vh;
}

/* corpo genérico da modal (tal como #form-colaborador) */
.modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* tabela dentro deste modal não precisa de sombra extra */
#modal-escolher-participantes .table-wrapper.no-shadow {
  box-shadow: none;
  padding: 0;
}

/* Select "Pesquisar colaborador" com o mesmo estilo dos selects do formulário */
.search-box-modal.search-box-modal--select {
  position: relative;
  max-width: 260px;
  width: 100%;
}

.search-box-modal--select select {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  padding: 8px 14px 8px 34px; /* espaço para o ícone */
  font-size: 13px;
  outline: none;
  background: #f9fafb;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.search-box-modal--select select:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.25);
}

.search-box-modal--select .icon-search {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-muted);
  pointer-events: none;
}
/* ============================
   SELECTS "PILL" GENÉRICOS
   (Formação, Recrutamento, etc.)
   ============================ */

.kmb-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;

  font-size: 13px;
  line-height: 1;
  cursor: pointer;

  padding: 0 30px 0 12px;  /* espaço para a seta à direita */
  min-width: 130px;
  height: 34px;

  /* seta do select no mesmo estilo do resto da app */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2314b8a6' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}

.kmb-select:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.25);
  background-color: #ffffff;
}

/* versão mais pequena (usada na tabela) */
.kmb-select-sm {
  font-size: 12px;
  height: 30px;
  padding-left: 10px;
  padding-right: 26px;
}

/* garantir que cabem bem nas colunas da tabela do modal */
#tbody-escolher-participantes .select-estado-curso,
#tbody-escolher-participantes .select-estado-participacao {
  width: 150px;
  max-width: 100%;
}
  /* === Grelha de escala totalmente ajustada === */

  #card-escala-grelha .table-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;      /* sem scroll horizontal */
  }

  #card-escala-grelha table {
    width: 100%;             /* ocupa toda a largura do card */
    border-collapse: collapse;
    table-layout: fixed;     /* distribui as colunas pelas larguras definidas */
  }

  #card-escala-grelha th,
  #card-escala-grelha td {
    padding: 3px 4px;
    font-size: 11px;
    white-space: nowrap;
    text-align: center;
  }

  /* Colunas fixas (colaborador + função) em percentagem */
  #card-escala-grelha th:first-child,
  #card-escala-grelha td:first-child {
    width: 18%;              /* nome do colaborador */
    text-align: left;
  }

  #card-escala-grelha th:nth-child(2),
  #card-escala-grelha td:nth-child(2) {
    width: 14%;              /* função */
    text-align: left;
  }

  /* Restantes colunas (15 dias) partilham o espaço restante */
  #card-escala-grelha th:nth-child(n+3),
  #card-escala-grelha td:nth-child(n+3) {
    width: calc(68% / 15);   /* 68% / 15 dias => cabe tudo alinhado */
  }

  /* Selects dos dias bem encaixados na célula */
  #card-escala-grelha .escala-celula-turno {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 2px;
    font-size: 11px;
  }

  /* Em ecrãs mais pequenos, só apertamos um pouco o texto/padding */
  @media (max-width: 1366px) {
    #card-escala-grelha th,
    #card-escala-grelha td {
      padding: 2px 3px;
      font-size: 10px;
    }
  }
/* Barra de seleção de mês na Escala */
#escala-periodo-mes-wrapper {
  margin: 10px 0 4px;          /* um pouco de espaço por cima e colado ao texto de baixo */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

#escala-periodo-mes-wrapper .filter-group {
  display: inline-flex;
  align-items: center;
}

/* campo mês com o mesmo estilo dos outros filtros */
#escala-periodo-mes-wrapper input[type="month"] {
  border-radius: 999px;
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  font-size: 12px;
  background: #f9fafb;
  min-width: 170px;
}

#escala-periodo-mes-wrapper input[type="month"]:focus {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 184, 148, 0.25);
}

/* texto por baixo, discreto */
.escala-periodo-help {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* === ESCALA – usar o comportamento do JS (DIAS_POR_PAGINA) === */

/* wrapper da tabela da escala: sem scroll horizontal próprio */
#card-escala-grelha .table-wrapper {
  background: #f3f4f6;
  border-radius: 16px;
  padding: 12px 16px;
  overflow-x: hidden;   /* ou "visible" se preferires, mas nunca auto */
}

/* tabela: largura calculada pelo JS, sem width forçada a 100% */
#card-escala-grelha table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;          /* deixa o JS controlar quantos dias aparecem */
}
/* ============================
   GRELHA DE ESCALA – CSS COMPLETO
   ============================ */

/* Container da tabela */
#card-escala-grelha .table-wrapper {
  background: #f3f4f6;        /* cinza clarinho */
  border-radius: 16px;
  padding: 12px 16px;
  overflow-x: hidden;         /* não cria scroll horizontal */
  max-width: 100%;
}

/* Tabela – largura controlada pelo JS (larguras em px nos <th>) */
#card-escala-grelha table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;                /* NÃO força 100%, usa a soma das colunas */
  max-width: 100%;
  margin: 0 auto;
}

/* Alinhamento e base de células/cabeçalhos */
#card-escala-grelha th,
#card-escala-grelha td {
  padding: 4px 4px;
  font-size: 11px;
  white-space: nowrap;
  text-align: center;         /* tudo centrado por defeito */
}

/* Cabeçalho + célula do colaborador (1ª coluna) */
.escala-colaborador-header,
.escala-colaborador-cell {
  background: transparent;
  color: #111827;
  font-weight: 600;
  font-size: 13px;
  text-align: left;           /* só o nome é alinhado à esquerda */
  padding: 4px 0;
  white-space: nowrap;
}

/* Cabeçalhos dos dias (Dom, Seg, etc.) */
.escala-dia-header {
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 6px 8px;
  text-transform: lowercase;
}

/* Dias úteis – cinza */
.escala-dia-header--weekday {
  background: #4b5563;
  color: #ffffff;
}

/* Fim de semana – turquesa */
.escala-dia-header--weekend {
  background: #04c6b2;
  color: #ffffff;
}

/* Células base dos dias */
.escala-celula-dia {
  border-radius: 999px;
  padding: 0;
}

/* Fundo padrão dia útil */
.escala-celula-dia--weekday {
  background: #4b5563;
}

/* Fundo fim de semana */
.escala-celula-dia--weekend {
  background: #04c6b2;
}

/* Select do turno dentro das células */
.escala-celula-turno-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: none;
  background: transparent;
  color: #ffffff;             /* texto quando o select está fechado */
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
}

/* Opções do dropdown – fundo claro do navegador com letras pretas */
.escala-celula-turno-select option {
  color: #111827;             /* letras pretas no menu aberto */
}

/* Opção vazia “-” mais suave */
.escala-celula-turno-select option[value=""] {
  color: #9ca3af;
}

/* Quando a escala está bloqueada */
.escala-celula-turno-select:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Focus discreto */
.escala-celula-turno-select:focus {
  outline: 2px solid #e5e7eb;
  outline-offset: 0;
}

/* Responsivo: ecrãs mais pequenos apertam um pouco tudo */
@media (max-width: 1366px) {
  #card-escala-grelha th,
  #card-escala-grelha td {
    padding: 3px 3px;
    font-size: 10px;
  }
}


/* ===== Espaçamento vertical e linhas por baixo de cada nome/linha ===== */

/* um pouco mais de “respiro” em cada linha */
.escala-colaborador-cell {
  font-weight: 500;
  font-size: 13px;
  color: #111827;
  white-space: nowrap;
  text-align: left;
  padding: 6px 0 4px;        /* ↑ mais espaço em cima/baixo */
}

/* células dos dias com respiro vertical */
.escala-celula-dia {
  border-radius: 999px;
  padding: 3px 0 4px;        /* ↑ ligeiro espaçamento vertical */
}

/* linha de separação de uma ponta à outra da tabela */
#card-escala-grelha tbody tr > * {
  border-bottom: 1px solid rgba(148, 163, 184, 0.45); /* cinza suave */
}

/* opcional: tirar linha na última linha, se não quiseres */
#card-escala-grelha tbody tr:last-child > * {
  border-bottom: none;
}
/* ============================
   Cabeçalho da linha dos dias
   ============================ */

/* todos os th da grelha alinhados ao centro por padrão */
#card-escala-grelha thead th {
  text-align: center;
}

/* exceção: título "COLABORADOR" continua à esquerda */
.escala-colaborador-header {
  background: transparent;
  color: #111827;
  font-weight: 600;
  font-size: 13px;
  text-align: left;      /* só esta coluna à esquerda */
  padding: 4px 0;
}

/* célula "qui. 01", "sex. 02", etc. */
.escala-dia-header {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 999px;
  padding: 6px 8px;
  text-transform: lowercase;

  /* novo estilo: cinza claro + texto preto */
  background: #e5e7eb;
  color: #111827;
}

/* weekend usa o mesmo look (apenas para garantir que não herdamos cores antigas) */
.escala-dia-header--weekday,
.escala-dia-header--weekend {
  background: #e5e7eb;
  color: #111827;
}
/* Centralizar todos os cabeçalhos de dia (qui. 01, sex. 02, ...) */
#card-escala-grelha thead th.escala-dia-header,
#card-escala-grelha thead th.escala-dia-header--weekday,
#card-escala-grelha thead th.escala-dia-header--weekend {
  text-align: center !important;
}

/* E garantir que só a coluna "COLABORADOR" fica à esquerda */
#card-escala-grelha thead th.escala-colaborador-header {
  text-align: left !important;
}
/* Coluna "COLABORADOR" bem estreita em telas menores */
@media (max-width: 900px) {
  #card-escala-grelha th.escala-colaborador-header,
  #card-escala-grelha td.escala-colaborador-cell {
    width: 70px !important;
    max-width: 70px !important;
    padding-left: 4px;
    padding-right: 2px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Telemóvel pequeno – ainda mais estreito */
@media (max-width: 480px) {
  #card-escala-grelha th.escala-colaborador-header,
  #card-escala-grelha td.escala-colaborador-cell {
    width: 55px !important;
    max-width: 55px !important;
    padding-left: 3px;
    padding-right: 1px;
    font-size: 10px;
  }
}

/* ============================
   Cores especiais: Folga / Férias
   ============================ */

/* Folga – verde/azul escuro, texto claro */
.escala-celula-dia--folga,
.escala-celula-dia--folga select {
  background-color: #0f766e !important;  /* teal escuro, combina com botões verdes/azuis */
  color: #ecfdf5 !important;             /* quase branco */
  border-color: transparent !important;
}

/* Férias – laranja suave (destaque), texto escuro */
.escala-celula-dia--ferias,
.escala-celula-dia--ferias select {
  background-color: #f97316 !important;  /* laranja da família Tailwind (orange-500) */
  color: #111827 !important;             /* texto escuro para boa legibilidade */
  border-color: transparent !important;
}

/* Se tiveres um estilo de hover, podes suavizar assim (opcional) */
.escala-celula-dia--folga:hover,
.escala-celula-dia--folga select:hover {
  filter: brightness(1.05);
}

.escala-celula-dia--ferias:hover,
.escala-celula-dia--ferias select:hover {
  filter: brightness(1.05);
}
/* ============================
   Mais espaçamento entre linhas
   ============================ */

/* aumenta ligeiramente o espaço vertical em todas as células da grelha */
#card-escala-grelha tbody tr > td {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* mantém o "pill" confortável também nos dias */
.escala-celula-dia {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ============================
   Zebra suave por colaborador
   ============================ */

/* linha 1,3,5,... – cinza muito claro */
#card-escala-grelha tbody tr:nth-child(odd) .escala-colaborador-cell {
  background-color: #f9fafb;   /* gray-50 */
}

/* linha 2,4,6,... – cinza ligeiramente mais forte */
#card-escala-grelha tbody tr:nth-child(even) .escala-colaborador-cell {
  background-color: #f3f4f6;   /* gray-100 */
}

/* arredondar um bocadinho o fundo do nome para acompanhar os pills */
.escala-colaborador-cell {
  border-radius: 999px;
  padding-left: 8px;
  padding-right: 8px;
}
/* Forçar a grelha de escalas a alinhar sempre à esquerda dentro do card */
#card-escala-grelha .table-wrapper {
  display: block;            /* garante que não aplica layout flex com centering */
  text-align: left;          /* nada centrado aqui */
}

/* Se a tabela estiver a ser centrada via margin auto, anulamos */
#card-escala-grelha .table-wrapper table {
  margin-left: 0 !important; /* encostado à esquerda */
  margin-right: 0 !important;
}
/* ============================
   Layout da célula: Estab. em cima, Turno em baixo
   ============================ */

/* Wrapper interno que criámos no JS */
.escala-celula-inner {
  display: flex;
  flex-direction: column;    /* empilhar verticalmente */
  gap: 2px;                  /* espaço entre Estab. e Turno */
  align-items: stretch;
}

/* diminuir altura geral das células para não "estender" a página */
#card-escala-grelha tbody tr > td {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* o TD em si quase sem padding vertical – quem manda são os selects */
.escala-celula-dia {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* selects dentro da célula: ocupam toda a largura, fonte mais pequena */
.escala-celula-inner select {
  width: 100%;
  max-width: 100%;
  font-size: 11px;
  height: 22px;             /* baixa altura para caber mais linhas na página */
  padding: 0 6px;
  box-sizing: border-box;
}

/* Estabelecimento (topo) com look mais clarinho */
.escala-celula-estab {
  background-color: #f3f4f6;         /* cinza claro */
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 999px 999px 0 0;    /* arredondado em cima */
}

/* Turno (baixo) com o look normal da escala */
.escala-celula-turno-select {
  border-radius: 0 0 999px 999px;    /* arredondado em baixo */
}

/* quando for Folga / Férias, mantém o efeito colorido na célula toda */
.escala-celula-dia--folga .escala-celula-estab,
.escala-celula-dia--folga .escala-celula-turno-select {
  background-color: #0f766e !important;
  color: #ecfdf5 !important;
  border-color: transparent !important;
}

.escala-celula-dia--ferias .escala-celula-estab,
.escala-celula-dia--ferias .escala-celula-turno-select {
  background-color: #f97316 !important;
  color: #111827 !important;
  border-color: transparent !important;
}

/* ligeiro hover só para não ficar pesado mesmo com 2 selects */
.escala-celula-dia--folga:hover .escala-celula-estab,
.escala-celula-dia--folga:hover .escala-celula-turno-select,
.escala-celula-dia--ferias:hover .escala-celula-estab,
.escala-celula-dia--ferias:hover .escala-celula-turno-select {
  filter: brightness(1.04);
}
/* === Evitar o "piscar" do modal de Configuração da Empresa === */

#configEmpresaModal {
  display: none;           /* começa sempre escondido */
  opacity: 0;
  visibility: hidden;
}

/* quando o JS abre (seta .open + display:flex) */
#configEmpresaModal.open {
  display: flex;
  opacity: 1;
  visibility: visible;
}

#backdrop-config-empresa {
  display: none;
  opacity: 0;
  visibility: hidden;
}

#backdrop-config-empresa.open {
  display: block;
  opacity: 1;
  visibility: visible;
}
/* ============================================================
   RH – MODO APP EM TELAS MENORES (ESTILO ÁREA DO COLABORADOR)
   (cola tudo isto no fim de hr.css)
   ============================================================ */

/* 1) Nunca deixar a página ter scroll lateral */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) Shell principal sempre a 100% da largura */
.app-shell,
.app-shell .main,
.app-shell .main .content,
.app-shell .main .tab-panel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}

/* Cards/tabelas principais preenchem a largura útil */
.card,
.table-wrapper,
.kpi-grid,
.page-header,
.tabs {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   <= 900px – layout de APP (topbar fixa + sidebar em drawer)
   ============================================================ */
@media (max-width: 900px) {

  /* shell deixa de ser 2 colunas rígidas */
  .app-shell {
    display: block;
    grid-template-columns: 1fr;
  }

  /* topbar sempre visível, colada ao topo */
  header.topbar,
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
  }

  /* conteúdo começa abaixo da topbar fixa */
  .app-shell .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 60px;          /* altura aprox. da topbar */
    padding-left: 12px;
    padding-right: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .page-header {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 14px;
  }

  /* KPIs em 2 colunas (tipo app) */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* sidebar como drawer por cima do conteúdo */
  .sidebar {
    position: fixed;
    top: 56px;                  /* mesma altura da topbar */
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80%;
    z-index: 130;

    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;

    box-shadow: 12px 0 30px rgba(15, 23, 42, 0.25);
    transition:
      transform .25s ease,
      opacity .25s ease,
      visibility .25s ease;
  }

  /* quando a app-shell estiver COM .sidebar-collapsed, abrimos o menu
     (é o mesmo comportamento que já tinhas no mobile, só reforçado aqui) */
  .app-shell.sidebar-collapsed .sidebar {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* tabelas em card, scroll só interno se precisarem */
  .table-wrapper {
    padding: 10px 10px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow-x: auto;          /* se a tabela for mais larga, scroll só aqui */
  }

  .table-wrapper table {
    min-width: 620px;          /* largura confortável; ajusta se for preciso */
  }
}

/* ============================================================
   <= 640px – mais compacto (telemóvel típico)
   ============================================================ */
@media (max-width: 640px) {
  .app-shell .main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .kpi-grid {
    grid-template-columns: minmax(0, 1fr);   /* 1 card por linha */
  }

  /* esconde a pesquisa na topbar em telas muito pequenas */
  .topbar .search-box {
    display: none;
  }

  /* tira o cargo para sobrar espaço ao nome */
  .user-role {
    display: none;
  }

  .table-wrapper {
    padding: 8px 8px;
  }

  .table-wrapper th,
  .table-wrapper td {
    padding: 6px 6px;
    font-size: 11px;
  }
}

/* ============================================================
   <= 480px – telemóvel muito pequeno
   ============================================================ */
@media (max-width: 480px) {
  .app-shell .main {
    padding-left: 6px;
    padding-right: 6px;
  }

  .card,
  .table-wrapper {
    border-radius: 16px;
  }
}
/* ============================================================
   TAB COLABORADORES – TABELA COM SCROLL HORIZONTAL EM MOBILE
   ============================================================ */

/* Header: título + botões continuam responsivos */
#tab-colaboradores .panel-header {
  flex-wrap: wrap;
  gap: 8px;
}

#tab-colaboradores .panel-title-actions {
  flex: 1 1 auto;
  min-width: 0;
}

#tab-colaboradores .panel-header-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Card da tabela ocupa sempre a largura útil */
#tab-colaboradores .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ---- DESKTOP / BASE ---- */
/* volta a deixar o texto em linha (sem “partir” letras) */
#tab-colaboradores .table-wrapper th,
#tab-colaboradores .table-wrapper td {
  white-space: nowrap;      /* uma linha só */
  overflow-wrap: normal;
  word-break: normal;
}

/* Nº + Ações um pouco mais estreitas */
#tab-colaboradores th:first-child,
#tab-colaboradores td:first-child {
  width: 60px;
  text-align: center;
}

#tab-colaboradores th:last-child,
#tab-colaboradores td:last-child {
  width: 150px;
}

/* ---- TELAS MENORES: SCROLL HORIZONTAL NO CARD ---- */
@media (max-width: 900px) {
  #tab-colaboradores .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    overflow-x: auto;           /* 🔁 scroll horizontal dentro do card */
  }

  #tab-colaboradores .table-wrapper table {
    width: auto;                /* deixa a tabela ter mais largura que o ecrã */
    min-width: 720px;           /* largura confortável p/ ver todas as colunas */
    table-layout: auto;
  }

  #tab-colaboradores .table-wrapper th,
  #tab-colaboradores .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
  }
}

/* ---- TELEMÓVEL MUITO PEQUENO ---- */
@media (max-width: 480px) {
  #tab-colaboradores .table-wrapper {
    padding: 8px 8px;
  }

  #tab-colaboradores .table-wrapper th,
  #tab-colaboradores .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }

  #tab-colaboradores .table-wrapper table {
    min-width: 680px;           /* um bocadinho mais estreito em SE/mini */
  }
}
/* ============================================================
   TAB COLABORADORES – TABELA EM CARD COM SCROLL VERTICAL
   ============================================================ */

/* Header: deixa o título + botões quebrarem bem em mobile */
#tab-colaboradores .panel-header {
  flex-wrap: wrap;
  gap: 8px;
}

#tab-colaboradores .panel-title-actions {
  flex: 1 1 auto;
  min-width: 0;
}

#tab-colaboradores .panel-header-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Card da tabela ocupa sempre a largura útil */
#tab-colaboradores .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Desktop: texto pode quebrar, mas sem estourar o card */
#tab-colaboradores .table-wrapper th,
#tab-colaboradores .table-wrapper td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* primeira coluna (Nº) + última (Ações) mais estreitas */
#tab-colaboradores th:first-child,
#tab-colaboradores td:first-child {
  width: 60px;
  text-align: center;
}

#tab-colaboradores th:last-child,
#tab-colaboradores td:last-child {
  width: 140px;
}

/* ===== TELAS MENORES – ESTILO APP + SCROLL VERTICAL NO CARD ===== */
@media (max-width: 900px) {
  #tab-colaboradores .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    /* 👉 anulamos o overflow global e criamos SCROLL VERTICAL no card */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 420px;        /* ajusta se quiseres o card mais alto/baixo */
  }

  #tab-colaboradores .table-wrapper table {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;   /* ignora min-width globais */
    table-layout: fixed;
  }

  #tab-colaboradores .table-wrapper th,
  #tab-colaboradores .table-wrapper td {
    font-size: 11px;
    padding: 6px 4px;

    /* texto sempre dentro da célula/card */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Nº mais compacto em mobile */
  #tab-colaboradores th:first-child,
  #tab-colaboradores td:first-child {
    width: 42px !important;
    text-align: center;
  }

  /* Ações com largura fixa mas sem empurrar o resto para fora */
  #tab-colaboradores th:last-child,
  #tab-colaboradores td:last-child {
    width: 110px !important;
  }
}

/* ===== TELEMÓVEL MUITO PEQUENO (tipo iPhone SE) ===== */
@media (max-width: 480px) {
  #tab-colaboradores .table-wrapper {
    padding: 8px 8px;
    max-height: 380px;         /* um pouco menos alto em ecrãs mini */
  }

  #tab-colaboradores .table-wrapper th,
  #tab-colaboradores .table-wrapper td {
    font-size: 10px;
    padding: 4px 3px;
  }

  #tab-colaboradores th:last-child,
  #tab-colaboradores td:last-child {
    width: 100px !important;
  }
}
/* ============================================================
   TAB COLABORADORES – TABELA COM SCROLL HORIZONTAL NO CARD
   (linhas na horizontal, sem letras “empilhadas”)
   ============================================================ */

/* Card da tabela sempre a 100% da largura */
#tab-colaboradores .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Comportamento geral da tabela --- */
#tab-colaboradores .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

/* texto normal, sem partir palavra a cada letra */
#tab-colaboradores .table-wrapper th,
#tab-colaboradores .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ===== MOBILE / TABLET – scroll para o lado dentro do card ===== */
@media (max-width: 900px) {

  /* o card continua bonito, mas passa a ter scroll X interno */
  #tab-colaboradores .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow-x: auto !important;   /* 👉 scroll lateral só no card */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-colaboradores .table-wrapper table {
    width: auto;                   /* deixa a tabela ter mais largura que o card */
    min-width: 720px !important;   /* ajusta se quiseres mais/menos largo */
    table-layout: auto !important; /* colunas não ficam esmagadas */
  }

  #tab-colaboradores .table-wrapper th,
  #tab-colaboradores .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important; /* linhas sempre na horizontal */
  }
}

/* telemóvel pequeno (tipo iPhone SE) */
@media (max-width: 480px) {
  #tab-colaboradores .table-wrapper {
    padding: 8px 8px;
  }

  #tab-colaboradores .table-wrapper table {
    min-width: 680px !important;   /* ligeiramente mais compacto */
  }

  #tab-colaboradores .table-wrapper th,
  #tab-colaboradores .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   TABS RH – esconder a partir de ~900px (vista tipo app)
   ============================================================ */
@media (max-width: 900px) {
  /* qualquer barra de tabs do RH */
  .tabs,
  .tabs-colab,
  .tabs-dep {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ===== KPI GRID – só aparece na tab "Colaboradores" em ecrãs pequenos ===== */
@media (max-width: 900px) {

  /* por defeito esconde em mobile */
  .kpi-grid {
    display: none !important;
  }

  /* quando a tab ativa é "colaboradores" volta a mostrar */
  body[data-hr-active-tab="colaboradores"] .kpi-grid {
    display: grid !important;   /* ou o display que usas normalmente */
  }
}
/* ============================================================
   TAB FÉRIAS & AUSÊNCIAS – TABELA COM SCROLL HORIZONTAL NO CARD
   ============================================================ */

/* Card / tabela ocupam sempre a largura útil do painel */
#tab-ferias .card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Wrapper da tabela dentro da tab de férias */
#tab-ferias .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Comportamento base da tabela */
#tab-ferias .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

/* Texto numa linha só (sem “quebrar” cada letra) */
#tab-ferias .table-wrapper th,
#tab-ferias .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ===== MOBILE / TABLET – scroll para o lado dentro do card ===== */
@media (max-width: 900px) {

  /* card continua bonito, mas com scroll X interno na tabela */
  #tab-ferias .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow-x: auto !important;   /* 👉 scroll lateral só aqui */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-ferias .table-wrapper table {
    width: auto;                   /* deixa ficar mais largo que o ecrã */
    min-width: 720px !important;   /* ajusta se quiseres mais/menos largo */
    table-layout: auto !important;
  }

  #tab-ferias .table-wrapper th,
  #tab-ferias .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important; /* linhas sempre na horizontal */
  }
}

/* ===== telemóvel pequeno (tipo iPhone SE) ===== */
@media (max-width: 480px) {
  #tab-ferias .table-wrapper {
    padding: 8px 8px;
  }

  #tab-ferias .table-wrapper table {
    min-width: 680px !important;   /* um pouco mais compacto em ecrãs mini */
  }

  #tab-ferias .table-wrapper th,
  #tab-ferias .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ===== FÉRIAS – botão igual ao de Recrutamento em telas menores ===== */
@media (max-width: 900px) {
  #tab-ferias #btn-novo-pedido-rh {
    font-size: 11px;
    padding: 6px 10px;
    line-height: 1;
  }
}
/* ====== Férias / Ausências – botões "+" iguais em mobile ====== */
@media (max-width: 900px) {

  /* botão "+ Novo pedido de férias (RH)" + "+ Nova ausência (RH)" */
  #tab-ferias #btn-novo-pedido-rh.btn-primary,
  #tab-ferias #btn-nova-ausencia-rh.btn-primary {
    font-size: 11px;
    padding: 6px 10px;
    line-height: 1;
    min-width: 200px;         /* ajusta se quiseres mais/menos largo */
    justify-content: center;  /* texto centrado */
  }
}

/* ============================================================
   TAB ABONOS & SUPLEMENTOS – TABELA COM SCROLL HORIZONTAL
   ============================================================ */

/* Header responsivo */
#tab-abonos .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#tab-abonos .panel-header h2 {
  font-size: 16px;
}

/* Card / tabela ocupam sempre a largura útil */
#tab-abonos .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* base desktop: tabela normal, sem partir letras */
#tab-abonos .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-abonos .table-wrapper th,
#tab-abonos .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ===== MOBILE / TABLET – scroll para o lado dentro do card ===== */
@media (max-width: 900px) {

  #tab-abonos .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow-x: auto !important;   /* 👉 scroll lateral só no card */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-abonos .table-wrapper table {
    width: auto;                   /* pode ficar mais larga que o ecrã */
    min-width: 720px !important;   /* ajusta se quiseres mais/menos largo */
    table-layout: auto !important;
  }

  #tab-abonos .table-wrapper th,
  #tab-abonos .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;
  }
}

/* ===== Telemóvel pequeno ===== */
@media (max-width: 480px) {
  #tab-abonos .table-wrapper {
    padding: 8px 8px;
  }

  #tab-abonos .table-wrapper table {
    min-width: 680px !important;
  }

  #tab-abonos .table-wrapper th,
  #tab-abonos .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ===== MOBILE – botão no “end” em baixo do título ===== */
@media (max-width: 900px) {
  #tab-abonos .panel-header {
    flex-direction: column;      /* título em cima, botão em baixo */
    align-items: flex-start;
    gap: 6px;
  }

  #tab-abonos .panel-header h2 {
    width: 100%;
  }

  #tab-abonos .panel-header .btn-primary {
    align-self: flex-end;        /* 👉 encosta o botão ao lado direito */
  }
}

/* extra opcional para ecrãs muito pequenos */
@media (max-width: 480px) {
  #tab-abonos .panel-header .btn-primary {
    padding: 6px 12px;
    font-size: 12px;
    box-shadow: 0 6px 14px rgba(0, 184, 148, 0.28);
  }
}
/* ============================================================
   TAB SALÁRIOS – HEADER + TABELA 100% RESPONSIVOS
   ============================================================ */

/* Header base (desktop) */
#tab-salarios .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#tab-salarios .panel-header h2 {
  font-size: 16px;
}

#tab-salarios .panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Card / tabela ocupam sempre a largura útil */
#tab-salarios .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Desktop: tabela normal, texto sem partir letras */
#tab-salarios .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-salarios .table-wrapper th,
#tab-salarios .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ===== MOBILE / TABLET – header em coluna + scroll lateral ===== */
@media (max-width: 900px) {

  /* título em cima, botões em baixo à direita */
  #tab-salarios .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #tab-salarios .panel-header h2 {
    width: 100%;
  }

  #tab-salarios .panel-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
  }

  #tab-salarios .panel-actions .btn-primary {
    white-space: nowrap;
  }

  /* tabela em card com scroll horizontal interno */
  #tab-salarios .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow-x: auto !important;   /* 👉 scroll para o lado só dentro do card */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-salarios .table-wrapper table {
    width: auto;                   /* pode ser mais larga que o ecrã */
    min-width: 1050px !important;  /* muitos campos → um pouco mais larga */
    table-layout: auto !important;
  }

  #tab-salarios .table-wrapper th,
  #tab-salarios .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important; /* tudo fica na horizontal */
  }

  /* a linha vazia de “sem dados” pode quebrar texto */
  #tab-salarios .table-wrapper tr.empty-row td {
    white-space: normal !important;
  }
}

/* ===== Telemóvel pequeno ===== */
@media (max-width: 480px) {
  #tab-salarios .panel-actions .btn-primary {
    padding: 6px 10px;
    font-size: 11px;
    box-shadow: 0 6px 14px rgba(0, 184, 148, 0.28);
  }

  #tab-salarios .table-wrapper {
    padding: 8px 8px;
  }

  #tab-salarios .table-wrapper table {
    min-width: 980px !important;
  }

  #tab-salarios .table-wrapper th,
  #tab-salarios .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   TAB RECRUTAMENTO – HEADER + TABELA RESPONSIVOS
   ============================================================ */

/* Header base (desktop) */
#tab-recrutamento .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#tab-recrutamento .panel-header h2 {
  font-size: 16px;
}

#tab-recrutamento .panel-actions {
  display: flex;
  gap: 8px;
}

/* Card / tabela ocupam sempre a largura útil */
#tab-recrutamento .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Desktop: tabela normal, sem partir letras */
#tab-recrutamento .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-recrutamento .table-wrapper th,
#tab-recrutamento .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ===== MOBILE / TABLET – header em coluna + scroll lateral ===== */
@media (max-width: 900px) {

  /* título em cima, botão em baixo à direita */
  #tab-recrutamento .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #tab-recrutamento .panel-header h2 {
    width: 100%;
  }

  #tab-recrutamento .panel-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #tab-recrutamento .panel-actions .btn-primary {
    white-space: nowrap;
  }

  /* tabela em card com scroll X interno */
  #tab-recrutamento .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow-x: auto !important;   /* 👉 scroll lateral só no card */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-recrutamento .table-wrapper table {
    width: auto;                   /* pode ser mais larga que o ecrã */
    min-width: 800px !important;   /* ajusta se quiseres mais/menos largo */
    table-layout: auto !important;
  }

  #tab-recrutamento .table-wrapper th,
  #tab-recrutamento .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important; /* tudo na horizontal */
  }
}

/* ===== Telemóvel pequeno ===== */
@media (max-width: 480px) {
  #tab-recrutamento .panel-actions .btn-primary {
    padding: 6px 10px;
    font-size: 11px;
    box-shadow: 0 6px 14px rgba(0, 184, 148, 0.28);
  }

  #tab-recrutamento .table-wrapper {
    padding: 8px 8px;
  }

  #tab-recrutamento .table-wrapper table {
    min-width: 740px !important;
  }

  #tab-recrutamento .table-wrapper th,
  #tab-recrutamento .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   RECRUTAMENTO – Estado / Ano lado a lado SEM se sobrepor
   ============================================================ */

/* wrapper dos filtros */
#tab-recrutamento #filtro-vagas-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* cada grupo com label em cima e select em baixo */
#tab-recrutamento #filtro-vagas-wrapper .filter-group {
  display: flex;
  flex-direction: column;      /* label em cima, select em baixo */
  align-items: flex-start;
  gap: 2px;
}

/* Estado e Ano dividem a linha em 2 colunas em mobile/tablet */
@media (max-width: 900px) {
  #tab-recrutamento #filtro-vagas-wrapper .filter-group {
    flex: 1 1 0;               /* 50% / 50% aprox. */
    min-width: 0;
  }

  /* botões vão para a linha de baixo */
  #tab-recrutamento #filtro-vagas-wrapper .filter-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* muito pequeno: só ajusta o espaçamento */
@media (max-width: 480px) {
  #tab-recrutamento #filtro-vagas-wrapper {
    gap: 12px;
  }
}
/* ============================================================
   FÉRIAS – mover o toggle (Férias / Ausências) para baixo no mobile
   ============================================================ */

#tab-ferias .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* força o grupo de subtabs a ficar abaixo no mobile */
@media (max-width: 900px) {
  
  #tab-ferias .panel-header {
    align-items: flex-start;
  }

  /* subtab (Férias / Ausências) ↓ */
  #tab-ferias .ferias-toggle {
    order: 2;               /* vai para a segunda linha */
    width: 100%;            /* ocupa a linha inteira */
    margin-top: 10px;
  }

  /* ações (botão) ↑ */
  #tab-ferias .panel-header-actions {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: flex-end; /* 🔥 botão no end */
  }
}
/* ============================================================
   FORMAÇÃO – EXACTAMENTE IGUAL AO RECRUTAMENTO
   ============================================================ */

/* HEADER (título + botão) */
#tab-recrutamento .panel-header,
#tab-formacao    .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#tab-recrutamento .panel-header h2,
#tab-formacao    .panel-header h2 {
  font-size: 16px;
  margin: 0;
}

#tab-recrutamento .panel-actions,
#tab-formacao    .panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* FILTROS (Estado / Ano + botões) */
#filtro-vagas-wrapper,
#filtro-formacao-wrapper {
  margin-top: 10px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

#filtro-vagas-wrapper .filter-group,
#filtro-formacao-wrapper .filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* TABELA */
#tab-recrutamento .table-wrapper,
#tab-formacao    .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#tab-recrutamento .table-wrapper table,
#tab-formacao    .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-recrutamento .table-wrapper th,
#tab-recrutamento .table-wrapper td,
#tab-formacao    .table-wrapper th,
#tab-formacao    .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ========== MOBILE / TABLET ========== */
@media (max-width: 900px) {

  #tab-recrutamento .panel-header,
  #tab-formacao    .panel-header {
    align-items: flex-start;
  }

  #tab-recrutamento .panel-actions,
  #tab-formacao    .panel-actions {
    margin-left: auto;
    justify-content: flex-end;
  }

  #filtro-vagas-wrapper .filter-group,
  #filtro-formacao-wrapper .filter-group {
    flex: 1 1 150px;
    min-width: 140px;
  }

  #filtro-vagas-wrapper .filter-actions,
  #filtro-formacao-wrapper .filter-actions {
    flex: 0 0 auto;
  }

  #tab-recrutamento .table-wrapper,
  #tab-formacao    .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);

    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-recrutamento .table-wrapper table,
  #tab-formacao    .table-wrapper table {
    width: auto;
    min-width: 800px !important;
    table-layout: auto !important;
  }

  #tab-recrutamento .table-wrapper th,
  #tab-recrutamento .table-wrapper td,
  #tab-formacao    .table-wrapper th,
  #tab-formacao    .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;
  }
}

/* ========== TELEMÓVEL PEQUENO ========== */
@media (max-width: 480px) {

  #tab-recrutamento .table-wrapper,
  #tab-formacao    .table-wrapper {
    padding: 8px 8px;
  }

  #tab-recrutamento .table-wrapper table,
  #tab-formacao    .table-wrapper table {
    min-width: 740px !important;
  }

  #tab-recrutamento .table-wrapper th,
  #tab-recrutamento .table-wrapper td,
  #tab-formacao    .table-wrapper th,
  #tab-formacao    .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   TAB UTILIZADORES / ACESSOS – MOBILE FIRST
   ============================================================ */

/* Card + tabela ocupam sempre a largura útil do painel */
#tab-utilizadores .card,
#tab-utilizadores .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* tira o margin-inline “estranho” e deixa o card bem centrado */
#tab-utilizadores .card {
  margin: 0 0 14px 0 !important; /* só margem em baixo */
}

/* form dentro do card ocupa toda a largura do card */
#tab-utilizadores #form-acesso {
  width: 100%;
}

/* garante que cada form-group alinha pela mesma “linha” à esquerda */
#tab-utilizadores #form-acesso .form-group {
  justify-content: flex-start;
}

/* botão igual aos outros, mas alinhado ao tema */
#tab-utilizadores #form-acesso .btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* ===== DESKTOP BASE ===== */
#tab-utilizadores .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-utilizadores .table-wrapper th,
#tab-utilizadores .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* colunas nº e ações mais estreitas */
#tab-utilizadores th:first-child,
#tab-utilizadores td:first-child {
  width: 60px;
  text-align: center;
}

#tab-utilizadores th:last-child,
#tab-utilizadores td:last-child {
  width: 80px;
}

/* ===== MOBILE / TABLET (até 900px) ===== */
@media (max-width: 900px) {

  /* header quebra bem em 2 linhas se for preciso */
  #tab-utilizadores .panel-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* card “app-like” e centrado */
  #tab-utilizadores .card {
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    padding: 10px 12px;
  }

  /* form: 1 coluna, campos e botão perfeitamente alinhados */
  #tab-utilizadores #form-acesso {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #tab-utilizadores #form-acesso .form-group {
    grid-column: 1 / -1;
  }

  #tab-utilizadores #form-acesso .btn-primary {
    width: 100%;
  }

  /* tabela em card com scroll horizontal interno (não estraga o layout) */
  #tab-utilizadores .table-wrapper {
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    overflow-x: auto !important;      /* scroll lateral só dentro do card */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-utilizadores .table-wrapper table {
    width: auto;                       /* pode ser mais larga que o ecrã */
    min-width: 720px !important;       /* ajusta se precisares de mais/menos */
    table-layout: auto !important;
  }

  #tab-utilizadores .table-wrapper th,
  #tab-utilizadores .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;    /* linhas sempre na horizontal */
  }
}

/* ===== TELEMÓVEL MUITO PEQUENO (até 480px) ===== */
@media (max-width: 480px) {

  #tab-utilizadores .card {
    padding: 8px 10px;
    border-radius: 16px;
  }

  #tab-utilizadores .table-wrapper {
    padding: 8px 8px;
  }

  #tab-utilizadores .table-wrapper table {
    min-width: 680px !important;
  }

  #tab-utilizadores .table-wrapper th,
  #tab-utilizadores .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   TAB UTILIZADORES – CARD DO FORMULÁRIO PERFEITAMENTE FECHADO
   ============================================================ */

/* Card do formulário: mesmo look dos outros cards da app */
#tab-utilizadores .card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px 14px;
  margin: 0 0 14px 0 !important;   /* só margem em baixo, nada a “sair” para o lado */
  box-sizing: border-box;
}

/* título + texto com um pequeno respiro do conteúdo */
#tab-utilizadores .card h3.card-title-sm {
  margin-bottom: 4px;
}

#tab-utilizadores .card p {
  margin-bottom: 8px !important;
}

/* Form ocupa 100% da largura *dentro* do card */
#tab-utilizadores #form-acesso {
  width: 100%;
  margin: 0;
}

/* cada form-group usa a largura total e fica alinhado à esquerda */
#tab-utilizadores #form-acesso .form-group {
  width: 100%;
}

/* inputs/selects a 100% da largura do card (respeitando o padding do card) */
#tab-utilizadores #form-acesso input,
#tab-utilizadores #form-acesso select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Botão também a 100%, mas claramente dentro do card */
#tab-utilizadores #form-acesso .form-group:last-child {
  margin-top: 4px;
}

#tab-utilizadores #form-acesso .btn-primary {
  width: 100%;
  justify-content: center;
}

/* ===== MOBILE AJUSTADO (até 900px) ===== */
@media (max-width: 900px) {

  /* card mais “app-like” mas sempre centrado */
  #tab-utilizadores .card {
    padding: 10px 12px 12px;
    border-radius: 18px;
  }

  /* garantimos 1 coluna no form, mesmo que outras forms usem grelha diferente */
  #tab-utilizadores #form-acesso {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #tab-utilizadores #form-acesso .form-group {
    grid-column: 1 / -1;
  }
}
/* ============================================================
   PACK GLOBAL DE FILTROS – AJUSTE EM TELAS MENORES
   (Abonos, Salários, Férias, Escala, Ponto, etc.)
   ============================================================ */

@media (max-width: 900px) {

  /* barra de filtros sempre colada ao card e a 100% da largura */
  .card .filter-bar,
  #escala-periodo-mes-wrapper,
  #tab-ponto #filtro-ponto-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 10px;
    padding: 0;
    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    justify-content: flex-start;
  }

  /* cada grupo (label + input/select) vira “mini-coluna” */
  .card .filter-bar .filter-group,
  #escala-periodo-mes-wrapper .filter-group,
  #tab-ponto #filtro-ponto-wrapper .filter-group {
    flex: 1 1 150px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .card .filter-bar .filter-group label,
  #escala-periodo-mes-wrapper .filter-group label,
  #tab-ponto #filtro-ponto-wrapper .filter-group label {
    font-size: 12px;
    margin-bottom: 0;
  }

  /* inputs/selects ocupam SEMPRE a largura do card */
  .card .filter-bar .filter-group input,
  .card .filter-bar .filter-group select,
  #escala-periodo-mes-wrapper input[type="month"],
  #tab-ponto #filtro-ponto-wrapper .filter-group input,
  #tab-ponto #filtro-ponto-wrapper .filter-group select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* grupo dos botões (Filtrar / Repor filtros, etc.) vai para a linha de baixo */
  .card .filter-bar .filter-actions,
  #escala-periodo-mes-wrapper .filter-actions,
  #tab-ponto #filtro-ponto-wrapper .filter-actions {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }
}

/* telemóvel pequeno – botões podem ficar em “full width” se for preciso */
@media (max-width: 480px) {

  .card .filter-bar .filter-actions .btn-filter,
  .card .filter-bar .filter-actions .btn-ghost-sm,
  #escala-periodo-mes-wrapper .filter-actions .btn-filter,
  #escala-periodo-mes-wrapper .filter-actions .btn-ghost-sm,
  #tab-ponto #filtro-ponto-wrapper .filter-actions .btn-filter,
  #tab-ponto #filtro-ponto-wrapper .filter-actions .btn-ghost-sm {
    width: 100%;
    max-width: 260px;
    justify-content: center;
  }
}

/* ===== TELEMÓVEL MUITO PEQUENO (até 480px) ===== */
@media (max-width: 480px) {
  #tab-utilizadores .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }
}
/* ============================================================
   ABONOS + SALÁRIOS – filtros alinhados com o card em mobile
   ============================================================ */

/* alinhar a barra de filtros pela mesma largura dos cards */
#tab-abonos .filter-bar,
#tab-salarios .filter-bar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* mesmo padding horizontal dos cards/tabelas */
  padding-left: 14px;
  padding-right: 14px;

  margin-left: 0;
  margin-right: 0;
}

/* telas pequenas: nada a “sair” para fora, tudo quebra certinho */
@media (max-width: 640px) {
  #tab-abonos .filter-bar,
  #tab-salarios .filter-bar {
    padding-left: 10px;
    padding-right: 10px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* cada grupo (Período, etc.) ocupa meia linha e adapta-se */
  #tab-abonos .filter-bar .filter-group,
  #tab-salarios .filter-bar .filter-group {
    flex: 1 1 140px;
    min-width: 0;
  }

  /* zona dos botões fica numa linha abaixo, alinhados à esquerda */
  #tab-abonos .filter-bar .filter-actions,
  #tab-salarios .filter-bar .filter-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  /* datas ocupam a largura disponível do grupo (não forçam scroll) */
  #tab-abonos .filter-bar input[type="date"],
  #tab-salarios .filter-bar input[type="date"] {
    width: 100%;
  }
}

/* ============================================================
   FORMAÇÃO – IGUAL AO RECRUTAMENTO
   (filtros Estado / Ano + botão + comportamentos em mobile)
   ============================================================ */

/* 👉 wrapper dos filtros da Formação (Estado / Ano) */
#tab-formacao #filtro-formacao-wrapper {
  margin-top: 10px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

/* label em cima, select em baixo – alinhado pela base, tal como Recrutamento */
#tab-formacao #filtro-formacao-wrapper .filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* grupo dos botões Filtrar / Repor filtros */
#tab-formacao #filtro-formacao-wrapper .filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== mobile / tablet – igual ao Recrutamento ===== */
@media (max-width: 900px) {

  /* Estado e Ano ocupam ± metade da largura cada */
  #tab-formacao #filtro-formacao-wrapper .filter-group {
    flex: 1 1 0;
    min-width: 0;
  }

  /* botões vão para a linha seguinte, alinhados à esquerda */
  #tab-formacao #filtro-formacao-wrapper .filter-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* 👉 botão "+ Novo curso" com o mesmo tamanho do "+ Nova vaga"
     MAS APENAS EM TELAS MENORES */
  #tab-formacao #btn-novo-curso {
    font-size: 11px;
    padding: 6px 10px;
    line-height: 1;
  }

  /* 👉 header da Formação igual ao do Recrutamento:
     título em cima, botão num “degrau” abaixo, à direita */
  #tab-formacao .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #tab-formacao .panel-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ===== COLABORADORES – botões iguais ao da Formação em telas menores ===== */
@media (max-width: 900px) {
  /* aplica ao "Exportar colaboradores" e ao "+ Novo colaborador"
     (ambos têm .btn-primary dentro do tab-colaboradores) */
  #tab-colaboradores .btn-primary {
    font-size: 11px;
    padding: 6px 10px;
    line-height: 1;
    white-space: nowrap;
  }
}
/* ============================================================
   TAB ESTRUTURA / RESPONSÁVEIS – TUDO DENTRO DOS CARDS
   ============================================================ */

/* Card do formulário */
#tab-estrutura .card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px 14px;
  margin: 0 0 14px 0 !important;
  box-sizing: border-box;
}

/* Form ocupa a largura toda do card */
#tab-estrutura #form-resp-dep {
  width: 100%;
}

/* Cada form-group respeita a largura do card */
#tab-estrutura #form-resp-dep .form-group,
#tab-estrutura #form-resp-dep .form-group-full {
  width: 100%;
}

/* Card da tabela */
#tab-estrutura .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tabela base (desktop) */
#tab-estrutura .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-estrutura .table-wrapper th,
#tab-estrutura .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* coluna Ações mais estreita */
#tab-estrutura th:last-child,
#tab-estrutura td:last-child {
  width: 80px;
}

/* ================= MOBILE / TABLET (<= 900px) ================= */

@media (max-width: 900px) {

  /* card tipo app */
  #tab-estrutura .card {
    padding: 10px 12px 12px;
    border-radius: 18px;
  }

  /* form em 1 coluna dentro do card */
  #tab-estrutura #form-resp-dep {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #tab-estrutura #form-resp-dep .form-group,
  #tab-estrutura #form-resp-dep .form-group-full {
    grid-column: 1 / -1;
  }

  /* selects do dual-list ocupam 100% do card */
  #tab-estrutura .dual-list-select {
    width: 100%;
    max-width: 100%;
  }

  /* tabela em card com scroll horizontal interno,
     nada a sair para fora do card */
  #tab-estrutura .table-wrapper {
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    overflow-x: auto !important;      /* scroll lateral só aqui */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-estrutura .table-wrapper table {
    width: auto;                       /* pode ser mais larga que o ecrã */
    min-width: 720px !important;       /* ajusta se quiseres mais/menos largo */
    table-layout: auto !important;
  }

  #tab-estrutura .table-wrapper th,
  #tab-estrutura .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;    /* linhas na horizontal */
  }
}

/* ================= TELEMÓVEL PEQUENO (<= 480px) ================= */

@media (max-width: 480px) {
  #tab-estrutura .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  #tab-estrutura .table-wrapper {
    padding: 8px 8px;
  }

  #tab-estrutura .table-wrapper table {
    min-width: 680px !important;
  }

  #tab-estrutura .table-wrapper th,
  #tab-estrutura .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ===== TAB ESTRUTURA – TUDO MESMO DENTRO DO CARD ===== */

/* inputs / selects do formulário não podem ultrapassar o card */
#tab-estrutura #form-resp-dep input,
#tab-estrutura #form-resp-dep select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* dual-list ocupa só o espaço interno do card */
#tab-estrutura .dual-list {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* textos pequenos também alinhados ao interior do card */
#tab-estrutura .dual-list small {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* botões Anular / Guardar totalmente dentro do card */
#tab-estrutura .form-actions-resp-dep {
  width: 100%;
  box-sizing: border-box;
  padding-inline: 0;
}

/* em mobile os botões respeitam a largura do card */
@media (max-width: 900px) {
  #tab-estrutura .form-actions-resp-dep .btn-primary,
  #tab-estrutura .form-actions-resp-dep .btn-secondary {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}
/* ============================================================
   TAB COMUNICADOS – FORM + TABELA RESPONSIVOS
   ============================================================ */

/* Card base */
#tab-comunicados .card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px 14px;
  margin: 12px 0 16px 0 !important;
  box-sizing: border-box;
}

/* Form ocupa sempre 100% do card */
#tab-comunicados #form-comunicado {
  width: 100%;
}

/* inputs / selects / textarea a 100% da largura útil */
#tab-comunicados #form-comunicado input,
#tab-comunicados #form-comunicado select,
#tab-comunicados #form-comunicado textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Texto da tabela não parte palavras “à força” em desktop */
#tab-comunicados .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#tab-comunicados .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-comunicados .table-wrapper th,
#tab-comunicados .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* colunas estreitas: #, Estado, Ações */
#tab-comunicados th:first-child,
#tab-comunicados td:first-child {
  width: 60px;
  text-align: center;
}

#tab-comunicados th:nth-child(5),
#tab-comunicados td:nth-child(5),
#tab-comunicados th:nth-child(6),
#tab-comunicados td:nth-child(6) {
  width: 90px;
  text-align: center;
}

/* ================= MOBILE / TABLET (<= 900px) ================= */

@media (max-width: 900px) {

  /* Card mais “app” */
  #tab-comunicados .card {
    padding: 10px 12px 12px;
    border-radius: 18px;
  }

  /* Form em 1 coluna certinha */
  #tab-comunicados #form-comunicado {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #tab-comunicados #form-comunicado .form-group,
  #tab-comunicados #form-comunicado .form-group.full {
    grid-column: 1 / -1;
  }

  /* Botão “Publicar comunicado” a 100% da largura do card */
  #tab-comunicados #form-comunicado .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* Tabela em card com scroll horizontal interno */
  #tab-comunicados .table-wrapper {
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    overflow-x: auto !important;      /* scroll lateral só aqui */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-comunicados .table-wrapper table {
    width: auto;                       /* pode ser mais larga que o ecrã */
    min-width: 720px !important;       /* ajusta se quiseres mais/menos largo */
    table-layout: auto !important;
  }

  #tab-comunicados .table-wrapper th,
  #tab-comunicados .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;    /* linhas sempre na horizontal */
  }
}

/* ================= TELEMÓVEL PEQUENO (<= 480px) ================= */

@media (max-width: 480px) {

  #tab-comunicados .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  #tab-comunicados .table-wrapper {
    padding: 8px 8px;
  }

  #tab-comunicados .table-wrapper table {
    min-width: 680px !important;
  }

  #tab-comunicados .table-wrapper th,
  #tab-comunicados .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   TAB DOCUMENTOS INTERNOS – FORM + TABELA RESPONSIVOS
   ============================================================ */

/* Header da tab */
#tab-documentos .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Card principal */
#tab-documentos .card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px 14px;
  margin: 0 0 16px 0 !important;
  box-sizing: border-box;
}

/* Form ocupa 100% do card */
#tab-documentos #form-doc-interno {
  width: 100%;
}

/* Inputs/selects sempre dentro do card */
#tab-documentos #form-doc-interno input,
#tab-documentos #form-doc-interno select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Tabela base (desktop) */
#tab-documentos .table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#tab-documentos .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

#tab-documentos .table-wrapper th,
#tab-documentos .table-wrapper td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* coluna Ações mais estreita */
#tab-documentos th:last-child,
#tab-documentos td:last-child {
  width: 90px;
  text-align: center;
}

/* ================= MOBILE / TABLET (<= 900px) ================= */

@media (max-width: 900px) {

  /* Card em estilo app */
  #tab-documentos .card {
    padding: 10px 12px 12px;
    border-radius: 18px;
  }

  /* Form em 1 coluna dentro do card */
  #tab-documentos #form-doc-interno {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #tab-documentos #form-doc-interno .form-group,
  #tab-documentos #form-doc-interno .form-group.full {
    grid-column: 1 / -1;
  }

  /* Botão "Adicionar documento" full-width em mobile */
  #tab-documentos #form-doc-interno .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* Tabela em card com scroll horizontal interno */
  #tab-documentos .table-wrapper {
    margin-top: 10px;
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    overflow-x: auto !important;      /* scroll lateral só aqui */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-documentos .table-wrapper table {
    width: auto;                       /* pode ser mais larga que o ecrã */
    min-width: 720px !important;       /* ajusta se quiseres mais/menos */
    table-layout: auto !important;
  }

  #tab-documentos .table-wrapper th,
  #tab-documentos .table-wrapper td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;    /* linhas na horizontal */
  }
}

/* ================= TELEMÓVEL PEQUENO (<= 480px) ================= */

@media (max-width: 480px) {

  #tab-documentos .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  #tab-documentos .table-wrapper {
    padding: 8px 8px;
  }

  #tab-documentos .table-wrapper table {
    min-width: 680px !important;
  }

  #tab-documentos .table-wrapper th,
  #tab-documentos .table-wrapper td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* ============================================================
   TAB CONTROLO DE PONTO – APENAS TELAS MENORES
   ============================================================ */

/* ====== Até 900px (tablet / telemóvel grande) ====== */
@media (max-width: 900px) {

  /* card estilo app, tudo bem dentro */
  #tab-ponto .card {
    padding: 10px 12px 12px;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    margin: 0 0 16px 0 !important;
    box-sizing: border-box;
  }

  /* filtros: grupos em 2 colunas, botões vão para linha de baixo */
  #tab-ponto #filtro-ponto-wrapper {
    margin-top: 8px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }

#tab-ponto #filtro-ponto-wrapper .filter-group {
  flex: 1 1 150px;
  min-width: 140px;

  /* alinhado ao start e preparado para quebrar */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 8px;
}

/* label sempre numa linha só, em cima */
#tab-ponto #filtro-ponto-wrapper .filter-group label {
  flex: 0 0 100%;
  margin-bottom: 2px;
}

/* datas + "até" ficam todas na segunda linha, lado a lado */
#tab-ponto #filtro-ponto-wrapper .filter-group input[type="date"],
#tab-ponto #filtro-ponto-wrapper .filter-group .filter-sep {
  flex: 0 0 auto;
}


  #tab-ponto #filtro-ponto-wrapper .filter-actions {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  #tab-ponto #filtro-ponto-wrapper .btn-filter,
  #tab-ponto #filtro-ponto-wrapper .btn-ghost-sm {
    white-space: nowrap;
  }

  /* tabela: continua dentro do card, com scroll lateral interno */
  #tab-ponto .table-wrapper.no-shadow {
    margin-top: 6px;
    padding: 10px 10px;
    border-radius: 18px;
    box-shadow: none;                 /* respeita o .no-shadow */
    background: var(--card-bg);
    overflow-x: auto !important;      /* scroll só aqui, nunca fora do card */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #tab-ponto .table-wrapper.no-shadow table {
    width: auto;                      /* pode ser mais larga que o ecrã */
    min-width: 840px !important;      /* ajusta se quiseres mais / menos largo */
    table-layout: auto !important;
  }

  #tab-ponto .table-wrapper.no-shadow th,
  #tab-ponto .table-wrapper.no-shadow td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;   /* linhas na horizontal, como no desktop */
  }

  /* só a linha de “sem registos” pode quebrar texto */
  #tab-ponto .table-wrapper.no-shadow tr.row-empty-ponto td {
    white-space: normal !important;
  }

  /* coluna Ações centrada, como no desktop */
  #tab-ponto th:last-child,
  #tab-ponto td:last-child {
    text-align: center;
  }
}

/* ====== Telemóvel pequeno (até 480px) ====== */
@media (max-width: 480px) {

  #tab-ponto .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  #tab-ponto .table-wrapper.no-shadow {
    padding: 8px 8px;
  }

  #tab-ponto .table-wrapper.no-shadow table {
    min-width: 780px !important;      /* um pouco mais compacto */
  }

  #tab-ponto .table-wrapper.no-shadow th,
  #tab-ponto .table-wrapper.no-shadow td {
    font-size: 10px;
    padding: 4px 4px;
  }
}
/* "até" por cima do segundo date em telas menores */
@media (max-width: 640px) {

  /* grupo do período em coluna */
  #tab-ponto #filtro-ponto-wrapper .filter-group-periodo {
    flex-direction: column;
    align-items: flex-start;
  }

  /* os dois dates ocupam a largura toda do card */
  #tab-ponto #filtro-ponto-wrapper .filter-group-periodo input[type="date"] {
    width: 100%;
  }

  /* "até" numa linha própria, colado ao início */
  #tab-ponto #filtro-ponto-wrapper .filter-group-periodo .filter-sep {
    display: block;
    align-self: flex-start;
    margin: 4px 0 2px;
    font-size: 11px;
  }
}
/* ============================================================
   TAB ESCALAS – HEADER + FORM + TABELAS 100% RESPONSIVOS
   ============================================================ */

/* Header base (desktop) */
#tab-escala .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

#tab-escala .panel-header h2 {
  font-size: 16px;
}

#tab-escala .panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Card de configuração + card da grelha sempre a 100% da largura útil */
#tab-escala .card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== GRELHA SEM SCROLL – comportamento igual à Área do Colaborador ===== */

/* wrapper da grelha: NUNCA cria scroll horizontal,
   a largura adapta-se ao card e a navegação é só pelos botões */
#card-escala-grelha .table-wrapper.no-shadow {
  background: #f3f4f6;
  border-radius: 16px;
  padding: 12px 16px;
  overflow-x: hidden;    /* <— SEM scroll lateral */
  overflow-y: visible;
}

/* tabela ocupa a largura do card (colunas encolhem para caber) */
#card-escala-grelha .table-wrapper.no-shadow table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* distribui as colunas para caber tudo */
  margin: 0;
}

/* ===== BOTÕES DE PAGINAÇÃO COMO NA ÁREA DO COLABORADOR ===== */

#card-escala-grelha .escala-paginacao {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

#card-escala-grelha .escala-paginacao button {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* estado disabled mais apagado */
#card-escala-grelha .escala-paginacao button:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

#card-escala-grelha .escala-paginacao button:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
  transform: translateY(-1px);
}

/* texto central “Dias 01–15 de 31” alinhado ao centro */
#card-escala-grelha .escala-paginacao #escala-info {
  flex: 1 1 auto;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

/* ============================================================
   <= 900px (tablet / telemóvel grande)
   ============================================================ */
@media (max-width: 900px) {

  /* --- HEADER: título em cima, botões num "degrau" à direita --- */
  #tab-escala .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #tab-escala .panel-actions {
    width: 100%;
    justify-content: flex-end;
  }

  #tab-escala .panel-actions .btn-primary {
    white-space: nowrap;
  }

  /* --- CARDS com look "app" --- */
  #tab-escala .card {
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
    padding: 10px 12px 12px;
  }

  /* --- FORM DE CONFIGURAÇÃO: 1 coluna dentro do card --- */
  #tab-escala #form-escala-config {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
  }

  #tab-escala #form-escala-config .form-group {
    grid-column: 1 / -1;
  }

  #tab-escala #form-escala-config input,
  #tab-escala #form-escala-config select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #tab-escala #form-escala-config #btn-escala-gerar {
    width: 100%;
    justify-content: center;
  }

  /* --- CARD: MODELOS DE ESCALAS GUARDADAS --- */
  #card-escalas-guardadas .table-wrapper.no-shadow {
    margin-top: 8px;
    padding: 10px 10px;
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: none;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  #card-escalas-guardadas .table-wrapper.no-shadow table {
    width: auto;
    min-width: 520px !important;
    table-layout: auto !important;
  }

  #card-escalas-guardadas .table-wrapper.no-shadow th,
  #card-escalas-guardadas .table-wrapper.no-shadow td {
    font-size: 11px;
    padding: 6px 6px;
    white-space: nowrap !important;
  }

  /* --- FILTRO MENSAL DA ESCALA (mês + estab + botões) --- */
  #escala-periodo-mes-wrapper {
    margin: 10px 0 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }

  #escala-periodo-mes-wrapper .filter-group {
    flex: 1 1 150px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #escala-periodo-mes-wrapper .filter-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
  }

  #escala-periodo-mes-wrapper .filter-actions .btn-filter,
  #escala-periodo-mes-wrapper .filter-actions .btn-ghost-sm {
    white-space: nowrap;
  }

  /* --- CARD: GRELHA DE ESCALA (SEM SCROLL) --- */
  #card-escala-grelha {
    margin-top: 6px;
  }

  #card-escala-grelha .table-wrapper.no-shadow {
    padding: 10px 10px;
    border-radius: 18px;
    background: #f3f4f6;
    box-shadow: none;
    overflow-x: hidden !important;   /* <— força SEM scroll em mobile também */
  }

  #card-escala-grelha .table-wrapper.no-shadow table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  #card-escala-grelha .table-wrapper.no-shadow th,
  #card-escala-grelha .table-wrapper.no-shadow td {
    font-size: 11px;
    padding: 4px 4px;
  }

  /* Paginação em 2 linhas se for preciso,
     mas mantendo os botões com o mesmo estilo */
  #card-escala-grelha .escala-paginacao {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }

  #card-escala-grelha .escala-paginacao #escala-info {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ============================================================
   <= 480px (telemóvel pequeno)
   ============================================================ */
@media (max-width: 480px) {

  #tab-escala .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  #card-escalas-guardadas .table-wrapper.no-shadow {
    padding: 8px 8px;
  }

  #card-escalas-guardadas .table-wrapper.no-shadow table {
    min-width: 600px !important;
  }

  #card-escalas-guardadas .table-wrapper.no-shadow th,
  #card-escalas-guardadas .table-wrapper.no-shadow td {
    font-size: 10px;
    padding: 4px 3px;
  }

  /* grelha continua SEM scroll horizontal, apenas tudo mais compacto */
  #card-escala-grelha .table-wrapper.no-shadow {
    padding: 8px 8px;
  }

  #card-escala-grelha .table-wrapper.no-shadow th,
  #card-escala-grelha .table-wrapper.no-shadow td {
    font-size: 10px;
    padding: 3px 2px;
  }

  /* botões de paginação mais largos para toque */
  #card-escala-grelha .escala-paginacao button {
    flex: 1 1 45%;
    justify-content: center;
    text-align: center;
  }
}
/* =========================================
   TAB ESCALAS – layout igual à Área do Colaborador em mobile
   ========================================= */
@media (max-width: 480px) {

  /* tabela da grelha: layout fixo e 100% da largura do card */
  #tab-escala #card-escala-grelha .table-wrapper.no-shadow table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* 1ª coluna = COLABORADOR (estreita) */
  #tab-escala #card-escala-grelha thead th.escala-colaborador-header,
  #tab-escala #card-escala-grelha tbody td.escala-colaborador-cell {
    width: 26% !important;
    max-width: 26% !important;
    padding-left: 4px;
    padding-right: 3px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* restantes colunas (3 dias por página) partilham os 74% */
  #tab-escala #card-escala-grelha thead th:not(.escala-colaborador-header),
  #tab-escala #card-escala-grelha tbody td:not(.escala-colaborador-cell) {
    width: calc(74% / 3) !important;
    max-width: calc(74% / 3) !important;
  }

  /* cabeçalho dos dias (seg. 01, ter. 02, ...) mais compacto,
     com largura exactamente igual à célula */
  #tab-escala #card-escala-grelha thead th.escala-dia-header,
  #tab-escala #card-escala-grelha thead th.escala-dia-header--weekday,
  #tab-escala #card-escala-grelha thead th.escala-dia-header--weekend {
    padding: 2px 2px !important;
    font-size: 9px !important;
  }

  /* células dos dias: só um pouco de respiro lateral */
  #tab-escala #card-escala-grelha tbody td.escala-celula-dia {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* selects dentro das células bem compactos,
     para ficar o mesmo look da Área do Colaborador */
  #tab-escala #card-escala-grelha tbody td.escala-celula-dia select {
    font-size: 9px;
    height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
  }
}
/* ================================
   TOPBAR MOBILE – IGUAL À DA ÁREA
   ================================ */
@media (max-width: 640px) {

  /* barra mais compacta */
  .topbar {
    justify-content: space-between;   /* Menu à esquerda, user à direita */
    padding-inline: 16px;
    gap: 8px;
  }

  /* esconde pesquisa no mobile */
  .topbar .search-box {
    display: none !important;
  }

  /* botão "← Menu" mais pequeno */
  .topbar .btn-ghost {
    padding: 4px 12px;
    font-size: 12px;
  }

  /* chip de utilizador sempre encostado à direita,
     sem quebrar o nome / "Sair" para outra linha */
  .topbar .user-chip {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  .topbar .user-name {
    font-size: 12px;
  }

  .topbar .user-role {
    display: none; /* para sobrar espaço, se ainda existir */
  }
}
/* =========================================
   CONFIG EMPRESA – MODAL FULLSCREEN MOBILE
   ========================================= */

/* layout base (desktop / tablet) */
#configEmpresaModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);

  width: min(760px, 100% - 32px);
  max-height: 90vh;

  display: none;           /* já tinhas isto, mantém */
  flex-direction: column;  /* header em cima, form em baixo */
  z-index: 1100;
}

#configEmpresaModal.open {
  display: flex;           /* abre como coluna */
  opacity: 1;
  visibility: visible;
}

/* header fixo em cima quando há scroll */
#configEmpresaModal .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: inherit;
  padding: 16px 22px 8px;
  border-bottom: 1px solid var(--border-color);
}

/* corpo com scroll vertical interno */
#formConfigEmpresa {
  padding: 12px 22px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* grelha do formulário – 2 colunas em desktop */
#formConfigEmpresa .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 10px;
}

/* campos “full” ocupam a linha toda */
#formConfigEmpresa .form-group.full {
  grid-column: 1 / -1;
}

/* inputs/selects sempre a 100% da largura da coluna */
#formConfigEmpresa .form-group input,
#formConfigEmpresa .form-group select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ========= MOBILE / TABLET – ECRO TODO ========= */
@media (max-width: 768px) {

  /* modal ocupa a tela toda */
  #configEmpresaModal {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  #configEmpresaModal .modal-header {
    padding: 14px 16px 8px;
  }

  #formConfigEmpresa {
    padding: 10px 16px 14px;
  }

  /* formulário passa para 1 coluna em mobile */
  #formConfigEmpresa .form-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  #formConfigEmpresa .form-group.full {
    grid-column: 1 / -1;
  }
}

/* ========= TELEMÓVEL PEQUENO ========= */
@media (max-width: 480px) {
  #configEmpresaModal .modal-header h3 {
    font-size: 16px;
  }

  #configEmpresaModal .btn-ghost {
    padding: 4px 10px;
    font-size: 12px;
  }
}
/* Escalas RH – manter largura das colunas, permitir scroll horizontal se precisar */
#card-escala-grelha .table-wrapper {
  overflow-x: auto;        /* se não couber tudo, a grelha faz scroll lateral */
}

@media (max-width: 768px) {
  #card-escala-grelha .table-wrapper table {
    width: auto;           /* não esticar a 100% */
    max-width: none;
    table-layout: auto;    /* respeita os widths inline (95px) */
  }

  #card-escala-grelha th,
  #card-escala-grelha td {
    width: auto;           /* deixa o JS mandar com LARGURA_DIA_PX */
  }
}
@media (max-width: 768px) {
  #card-escala-grelha .escala-footer,   /* ou o nome real do teu container */
  #card-escala-grelha .escala-paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }

  #escala-prev,
  #escala-next {
    flex-shrink: 0;
  }

  #escala-info {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
  }
}
/* ============================================================
   ESCALA RH – FORÇAR PÍLLS COM LARGURA FIXA (SCROLL INTERNO)
   ============================================================ */
@media (max-width: 768px) {
  /* scroll horizontal só dentro do card da grelha */
  #card-escala-grelha .table-wrapper.no-shadow {
    overflow-x: auto !important;
    overflow-y: visible;
  }

  /* tabela deixa de esticar a 100%,
     passa a respeitar os widths inline (95px) dos dias */
  #card-escala-grelha .table-wrapper.no-shadow table {
    width: auto !important;
    max-width: none !important;
    min-width: auto !important;
    table-layout: auto !important;
  }

  /* células não levam width forçado pelas regras anteriores */
  #card-escala-grelha .table-wrapper.no-shadow th,
  #card-escala-grelha .table-wrapper.no-shadow td {
    width: auto !important;
  }
}
/* ============================================================
   ESCALAS – CORREÇÃO DO ALINHAMENTO DOS FILTROS EM TELAS MENORES
   ============================================================ */

/* Geral: deixa os grupos encolherem dentro do card */
#tab-escala #escala-periodo-mes-wrapper .filter-group {
  flex: 1 1 0;
  min-width: 0;              /* <— pode encolher sem rebentar para a direita */
}

#tab-escala #escala-periodo-mes-wrapper .filter-group input[type="month"],
#tab-escala #escala-periodo-mes-wrapper .filter-group select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ====== Até 768px (tablet / telemóvel) ====== */
@media (max-width: 768px) {

  #tab-escala #escala-periodo-mes-wrapper {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }

  /* grupos não têm largura mínima fixa em ecrãs pequenos */
  #tab-escala #escala-periodo-mes-wrapper .filter-group {
    flex: 1 1 150px;
    min-width: 0 !important;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
}

/* ====== Telemóvel pequeno (tipo iPhone 12 Pro) ====== */
@media (max-width: 480px) {

  /* empilha tudo: mês -> estabelecimento -> botões */
  #tab-escala #escala-periodo-mes-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-group,
  #tab-escala #escala-periodo-mes-wrapper .filter-actions {
    width: 100%;
    flex: 1 1 100%;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-group input[type="month"],
  #tab-escala #escala-periodo-mes-wrapper .filter-group select {
    width: 100%;
    max-width: 100%;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-actions button {
    flex: 0 0 auto;   /* continuam “pill”, mas já não saem para fora */
  }
}
/* ============================================================
   TAB ESCALAS – 3 BOTÕES (Filtrar / Repor / Limpar) NA MESMA LINHA
   ============================================================ */

/* tablet + telemóvel */
@media (max-width: 768px) {
  #tab-escala #escala-periodo-mes-wrapper .filter-actions {
    display: flex;
    flex-wrap: nowrap;        /* <— todos na mesma linha */
    gap: 6px;
    justify-content: space-between;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-actions button {
    flex: 1 1 0;             /* partilham a largura */
    min-width: 0;            /* podem encolher sem rebentar */
    text-align: center;
    white-space: nowrap;
    padding-inline: 8px;     /* um pouco mais compacto */
    font-size: 12px;
  }
}

/* telemóvel pequeno – mantém a mesma regra */
@media (max-width: 480px) {
  #tab-escala #escala-periodo-mes-wrapper .filter-actions {
    width: 100%;
    flex-wrap: nowrap;        /* continua tudo na mesma linha */
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-actions button {
    flex: 1 1 0;
    min-width: 0;
  }
}
/* ============================================================
   AJUSTE FINAL – Filtros Férias / Ausências e Ponto dentro do card
   em telas menores (não sair mais para a direita)
   ============================================================ */
@media (max-width: 900px) {

  /* garantir que o card tem padding normal e nada “sai” dos lados */
  #tab-ferias .card,
  #tab-ponto  .card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* barra de filtros colada ao card, sem “margens fantasma” */
  #tab-ferias .card .filter-bar,
  #tab-ponto  #filtro-ponto-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* grupo dos botões: usa a mesma largura do card, sem estourar */
  #tab-ferias .card .filter-bar .filter-actions,
  #tab-ponto  #filtro-ponto-wrapper .filter-actions {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;           /* Filtrar + Repor na mesma linha */
    gap: 8px;
    justify-content: flex-start;
  }

  /* botões ajustam-se à largura disponível (não empurram o layout) */
  #tab-ferias .card .filter-bar .filter-actions .btn-filter,
  #tab-ferias .card .filter-bar .filter-actions .btn-ghost-sm,
  #tab-ponto  #filtro-ponto-wrapper .filter-actions .btn-filter,
  #tab-ponto  #filtro-ponto-wrapper .filter-actions .btn-ghost-sm {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
  }
}
/* Modais em full-screen em telas pequenas, sem alterar estrutura */
@media (max-width: 768px) {

  /* garante que o backdrop cobre o ecrã todo */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
  }

  /* qualquer modal ocupa toda a largura/altura */
  .modal,
  .modal.modal-sm,
  .modal.modal-lg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
}
/* ============================
   MODAL CANDIDATOS – MOBILE
   ============================ */
@media (max-width: 480px) {

  /* modal ocupa a largura toda, mas o conteúdo é que faz scroll vertical */
  #modal-candidatos .modal.modal-lg {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* tabela adapta-se à largura do ecrã */
  #modal-candidatos .table-wrapper {
    max-width: 100%;
    overflow-x: hidden;      /* sem scroll lateral */
  }

  #modal-candidatos .table-wrapper table {
    width: 100%;
    table-layout: fixed;     /* divide em colunas iguais */
  }

  /* células mais compactas e com quebra de linha */
  #modal-candidatos th,
  #modal-candidatos td {
    font-size: 11px;
    padding: 6px 4px;
    white-space: normal;     /* permite quebrar linha */
    word-wrap: break-word;
    word-break: break-word;
  }
}
/* ============================================
   MODAL CANDIDATOS – scroll horizontal em mobile
   ============================================ */

/* Modal ocupa o ecrã todo e o meio passa a ser área de scroll */
@media (max-width: 480px) {
  #modal-candidatos .modal.modal-lg {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  #modal-candidatos .modal-header,
  #modal-candidatos .modal-footer {
    flex-shrink: 0;          /* não encolher */
  }

  /* zona da tabela fica elástica e com scroll interno */
  #modal-candidatos .table-wrapper.no-shadow {
    flex: 1 1 auto;
    width: 100%;
    overflow-x: auto;        /* 👈 scroll para o lado */
    overflow-y: auto;        /* e para baixo se tiver muitas linhas */
    -webkit-overflow-scrolling: touch;
  }
}

/* Força a tabela a ser mais larga que o ecrã para gerar overflow horizontal */
#modal-candidatos .table-wrapper.no-shadow table {
  table-layout: auto;
  width: max-content;
  min-width: 900px;          /* ajusta este valor se quiseres mais/menos largo */
}

/* Evita que o texto quebre e “encaixe” tudo na largura do ecrã */
#modal-candidatos .table-wrapper.no-shadow th,
#modal-candidatos .table-wrapper.no-shadow td {
  white-space: nowrap;
}
/* =====================================================
   MODAL CANDIDATOS – scroll horizontal em mobile
   ===================================================== */

@media (max-width: 480px) {

  /* Modal ocupa o ecrã todo e organiza em coluna */
  #modal-candidatos .modal.modal-lg {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
  }

  /* header e footer fixos, o meio é que rola */
  #modal-candidatos .modal-header,
  #modal-candidatos .modal-footer {
    flex-shrink: 0;
  }

  /* ÁREA DA TABELA: scroll horizontal + vertical */
  #modal-candidatos .table-wrapper.no-shadow {
    flex: 1 1 auto;
    width: 100% !important;
    overflow-x: auto !important;      /* 👈 scroll para o lado */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabela mais larga que o ecrã para gerar overflow */
  #modal-candidatos .table-wrapper.no-shadow table {
    table-layout: auto;
    width: max-content;
    min-width: 900px !important;      /* aumenta/diminui se quiseres */
  }

  /* Impede quebra de linha dentro das células */
  #modal-candidatos .table-wrapper.no-shadow th,
  #modal-candidatos .table-wrapper.no-shadow td {
    white-space: nowrap !important;
  }
}
/* =====================================================
   MODAL SELECIONAR COLABORADORES (FORMAÇÃO)
   - full screen + scroll horizontal da tabela em mobile
   ===================================================== */

@media (max-width: 480px) {

  /* Modal ocupa o ecrã todo */
  #modal-escolher-participantes .modal.modal-lg {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
  }

  /* header e footer fixos, centro rolável */
  #modal-escolher-participantes .modal-header,
  #modal-escolher-participantes .modal-footer {
    flex-shrink: 0;
  }

  /* Área da tabela com scroll (horizontal + vertical) */
  #modal-escolher-participantes .table-wrapper.no-shadow {
    flex: 1 1 auto;
    width: 100% !important;
    overflow-x: auto !important;      /* 👈 scroll para o lado */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabela mais larga que o ecrã para forçar overflow */
  #modal-escolher-participantes .table-wrapper.no-shadow table {
    table-layout: auto;
    width: max-content;
    min-width: 900px !important;      /* ajusta se quiseres mais/menos largo */
  }

  /* Não deixa as colunas partirem à linha */
  #modal-escolher-participantes .table-wrapper.no-shadow th,
  #modal-escolher-participantes .table-wrapper.no-shadow td {
    white-space: nowrap !important;
  }
}
/* =====================================================
   MODAL HISTÓRICO DE CESSAÇÃO
   - full screen + scroll horizontal da tabela em mobile
   ===================================================== */

@media (max-width: 480px) {

  /* Modal ocupa o ecrã todo */
  #modal-historico-cessacao .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column;
  }

  /* header e eventual footer fixos, centro rolável */
  #modal-historico-cessacao .modal-header,
  #modal-historico-cessacao .modal-footer {
    flex-shrink: 0;
  }

  /* Área da tabela com scroll (horizontal + vertical) */
  #modal-historico-cessacao .table-wrapper.no-shadow {
    flex: 1 1 auto;
    width: 100% !important;
    overflow-x: auto !important;      /* 👈 scroll para o lado */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabela mais larga que o ecrã para forçar overflow */
  #modal-historico-cessacao .table-wrapper.no-shadow table {
    table-layout: auto;
    width: max-content;
    min-width: 900px !important;      /* ajusta conforme nº de colunas */
  }

  /* Não deixa as colunas partirem à linha */
  #modal-historico-cessacao .table-wrapper.no-shadow th,
  #modal-historico-cessacao .table-wrapper.no-shadow td {
    white-space: nowrap !important;
  }
}
/* =====================================================
   FÉRIAS + AUSÊNCIAS – MOBILE (≤ 480px)
   ===================================================== */
@media (max-width: 480px) {

  /* modal usa a altura do ecrã */
  #modal-ferias-rh   .modal.modal-sm,
  #modal-ausencia-rh .modal.modal-sm {
    height: 100vh;
    max-height: 100vh;
  }

  /* form em coluna + footer em baixo */
  #modal-ferias-rh   .modal-sm form,
  #modal-ausencia-rh .modal-sm form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* 1ª div dentro do form = corpo com scroll quando precisar */
  #modal-ferias-rh   form > div:first-child,
  #modal-ausencia-rh form > div:first-child {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;          /* ignora max-height inline */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* footer encostado em baixo */
  #modal-ferias-rh   .modal-footer,
  #modal-ausencia-rh .modal-footer {
    margin-top: auto;
  }
}

/* =====================================================
   ABONOS / SUPLEMENTOS – MOBILE (≤ 480px)
   - modal full height
   - campos com espaçamento igual ao formulário Colaborador
   - scroll só se faltar espaço
   - botões colados em baixo
   ===================================================== */
@media (max-width: 480px) {

  /* modal ocupa a altura do ecrã e organiza em coluna */
  #modal-movimento .modal.modal-sm {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* header fixo em cima */
  #modal-movimento .modal-header {
    flex-shrink: 0;
  }

  /* form ocupa o espaço entre header e footer */
  #modal-movimento #form-movimento {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* corpo do formulário */
  #modal-movimento #form-movimento .form-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;                 /* só scroll se for preciso */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    /* padding próximo do formulário Colaborador */
    padding: 12px 18px 10px;
    row-gap: 0;                       /* deixa o espaçamento vir do margin-bottom */
  }

  /* espaçamento entre campos igual em todos os forms */
  #modal-movimento #form-movimento .form-grid .form-group,
  #modal-movimento #form-movimento .form-grid .form-group.full {
    margin-bottom: 8px;               /* ajusta para cima/baixo se quiseres ainda mais igual */
  }

  /* footer colado ao fundo do modal (botões em baixo) */
  #modal-movimento #form-movimento .modal-footer {
    flex-shrink: 0;
    margin-top: auto;
  }
}
/* ============================================
   MODAL "NOVA VAGA" – MOBILE (≤ 480px)
   - modal full height
   - corpo scrolla só se for preciso
   - botões colados em baixo
   - espaçamento igual aos outros formulários
   ============================================ */
@media (max-width: 480px) {

  /* modal ocupa a altura do ecrã e organiza em coluna */
  #modal-vaga .modal.modal-sm {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* header fixo em cima */
  #modal-vaga .modal-header {
    flex-shrink: 0;
  }

  /* form ocupa o espaço entre header e footer */
  #modal-vaga #form-vaga {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* .form-grid é o corpo:
     - sem limite de altura
     - só ganha scroll se o conteúdo passar o ecrã */
  #modal-vaga #form-vaga .form-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;      /* ignora o inline max-height:60vh */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    padding: 14px 22px;               /* mesmo padding que tens no inline */
    row-gap: 10px;                    /* espaçamento de campos tipo "Colaborador" */
  }

  /* sem margem extra por baixo dos grupos – usamos o row-gap */
  #modal-vaga #form-vaga .form-grid .form-group,
  #modal-vaga #form-vaga .form-grid .form-group.full {
    margin-bottom: 0;
  }

  /* footer com os botões colado ao fundo do modal */
  #modal-vaga #form-vaga .modal-footer {
    flex-shrink: 0;
    margin-top: auto;
  }
}
/* ============================================
   MODAL "NOVO CURSO DE FORMAÇÃO" – MOBILE (≤ 480px)
   - modal full height
   - corpo scrolla só se for preciso
   - botões colados em baixo
   - espaçamento igual aos outros formulários
   ============================================ */
@media (max-width: 480px) {

  /* modal ocupa a altura do ecrã e organiza em coluna */
  #modal-curso .modal.modal-sm {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* header fixo em cima */
  #modal-curso .modal-header {
    flex-shrink: 0;
  }

  /* form ocupa o espaço entre header e footer */
  #modal-curso #form-curso {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* corpo do formulário (.form-grid):
     - sem limite de altura
     - só ganha scroll se o conteúdo passar o ecrã */
  #modal-curso #form-curso .form-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;      /* ignora o inline max-height:60vh */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    padding: 14px 22px;               /* mesmo padding que já tinhas */
    row-gap: 10px;                    /* espaçamento entre campos */
  }

  /* sem margin-bottom extra – usamos só o row-gap */
  #modal-curso #form-curso .form-grid .form-group,
  #modal-curso #form-curso .form-grid .form-group.full {
    margin-bottom: 0;
  }

  /* footer com os botões colado ao fundo do modal */
  #modal-curso #form-curso .modal-footer {
    flex-shrink: 0;
    margin-top: auto;
  }
}
/* ============================================
   MODAL REGISTOS DE PONTO – SCROLL LATERAL EM MOBILE
   ============================================ */
@media (max-width: 480px) {

  /* card um bocadinho mais compacto, opcional */
  #modal-ponto .card {
    padding: 8px 10px 10px;
    border-radius: 16px;
  }

  /* scroll horizontal só dentro da tabela */
  #modal-ponto .table-wrapper.no-shadow {
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* tabela pode ser mais larga que o ecrã,
     o utilizador faz scroll para ver tudo */
  #modal-ponto .table-wrapper.no-shadow table {
    width: auto;
    min-width: 480px;          /* ajusta se quiseres mais/menos largo */
    table-layout: auto;
  }

  #modal-ponto .table-wrapper.no-shadow th,
  #modal-ponto .table-wrapper.no-shadow td {
    white-space: nowrap;       /* evita quebrar texto para baixo */
    font-size: 11px;
    padding: 6px 6px;
  }
}
/* menus dos 3 pontinhos sempre por cima em mobile */
@media (max-width: 900px) {
  .actions-menu {
    z-index: 2000;
  }
}
.mov-extra-hidden {
  display: none;
}

/* Docs Internos — linhas inativas (histórico) */
#tbody-docs-internos tr.doc-inativo {
  background: #f8fafc;           /* slate-50 (muito suave) */
  border-left: 4px solid #94a3b8; /* slate-400 para sinalizar */
}

#tbody-docs-internos tr.doc-inativo td {
  color: #64748b; /* slate-500 */
}

#tbody-docs-internos tr.doc-inativo a {
  color: #64748b; /* mantém alinhado com o tema */
  text-decoration: underline;
}

#tbody-docs-internos tr.doc-inativo:hover {
  background: #f1f5f9; /* slate-100 no hover */
}
/* Comunicados — linhas inativas (histórico) */
#tbody-comunicados tr.com-inativo {
  background: #f8fafc;            /* slate-50 (suave) */
  border-left: 4px solid #94a3b8; /* slate-400 */
}

#tbody-comunicados tr.com-inativo td {
  color: #64748b; /* slate-500 */
}

/* badges dentro de inativos ficam mais suaves */
#tbody-comunicados tr.com-inativo .badge {
  opacity: 0.85;
}

/* hover ligeiro */
#tbody-comunicados tr.com-inativo:hover {
  background: #f1f5f9; /* slate-100 */
}
/* ============================================================
   SALÁRIOS — DROPDOWN (⋯)
   ✅ largura pelo texto + sempre dentro do viewport
   ============================================================ */

#tab-salarios .acoes-menu{
  position: relative;
  display: inline-block;
}

/* dropdown base */
#tab-salarios .acoes-menu .acoes-dropdown{
  position: absolute;
  top: 18px;
  right: 0;
  left: auto;

  /* ✅ o menu cresce pelo conteúdo */
  display: none; /* manténs o teu toggle .open */
  width: max-content;

  /* ✅ limites para nunca sair do ecrã */
  max-width: min(92vw, 360px);
  min-width: max-content;

  box-sizing: border-box;

  /* ✅ evita cortar texto */
  overflow: visible !important;

  max-height: min(70vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* ✅ garante que fica acima */
  z-index: 20050;
}

/* botões */
#tab-salarios .acoes-menu .acoes-dropdown > button{
  display: block;
  width: 100%;
  box-sizing: border-box;

  white-space: nowrap;   /* não corta */
  overflow: visible !important;
  text-overflow: clip;

  text-align: center;
}

/* ✅ MOBILE: evita estourar para o lado esquerdo/direito */
@media (max-width: 900px){
  #tab-salarios .acoes-menu{
    width: auto; /* não forces 100% aqui, isto atrapalha o max-content */
  }

  #tab-salarios .acoes-menu .acoes-dropdown{
    right: 0 !important;
    left: auto !important;

    /* ✅ se não couber, ocupa viewport */
    max-width: 92vw !important;

    /* ✅ para menus grandes, não deixa sair por baixo */
    max-height: 60vh;
  }
}

/* ✅ TELEMÓVEL MUITO PEQUENO: deixa quebrar */
@media (max-width: 360px){
  #tab-salarios .acoes-menu .acoes-dropdown{
    width: 92vw !important;
    max-width: 92vw !important;
  }

  #tab-salarios .acoes-menu .acoes-dropdown > button{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* toggle */
#tab-salarios .acoes-menu.open .acoes-dropdown{
  display: block !important;
}

/* =========================
   ✅ Atalhos (Painel) em mobile: estilo apps + 4 por linha
   ========================= */
@media (max-width: 520px){
  /* 4 atalhos por linha em ambos os grids */
  body[data-hr-active-tab="painel"] .hr-app-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* card mais compacto tipo “ícone de app” */
  body[data-hr-active-tab="painel"] .hr-app{
    padding: 10px 6px 9px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.06) !important;
  }

  /* ícone menor */
  body[data-hr-active-tab="painel"] .hr-app-icon{
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: 20px !important;
    margin: 0 auto 6px !important;
  }

  /* texto tipo “nome do app” */
  body[data-hr-active-tab="painel"] .hr-app-label{
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  /* esconder subtítulo (fica igual launcher de telemóvel) */
  body[data-hr-active-tab="painel"] .hr-app-sub{
    display: none !important;
  }

  /* badge mais discreto (Formação condicional) */
  body[data-hr-active-tab="painel"] .hr-app-badge{
    top: 6px !important;
    right: 6px !important;
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}
/* =========================
   Z-INDEX: BottomNav < Modais
   ========================= */
:root{
  --hr-z-bottomnav: 9000;
  --hr-z-bottommenu: 9010;
  --hr-z-modal-backdrop: 20000;
  --hr-z-modal: 20010;
}

/* bottom bar */
.hr-bottomnav{ z-index: var(--hr-z-bottomnav) !important; }
.hr-bnav-menu{ z-index: var(--hr-z-bottommenu) !important; }

/* modais (Bootstrap-like) */
.modal-backdrop{
  z-index: var(--hr-z-modal-backdrop) !important;
}
.modal{
  z-index: var(--hr-z-modal) !important;
}

/* se também usas o teu helper */
.hr-modal-backdrop{
  z-index: var(--hr-z-modal-backdrop) !important;
}

/* =========================
   MODAIS FULLSCREEN EM MOBILE
   ========================= */
@media (max-width: 520px){
  .modal-backdrop{
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
  }
  .modal-backdrop .modal{
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* força scroll dentro do modal se necessário */
  .modal-backdrop .modal .form-grid,
  .modal-backdrop .modal .table-wrapper,
  .modal-backdrop .modal .modal-body{
    max-height: none !important;
  }

  /* ✅ quando modal aberto: some a bottom bar (sem clique) */
  body.modal-open .hr-bottomnav,
  body.modal-open .hr-bnav-menu,
  body[data-hr-modal-open="1"] .hr-bottomnav,
  body[data-hr-modal-open="1"] .hr-bnav-menu{
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(12px);
  }
}
/* =========================
   FIX: MODAL + DROPDOWNS (⋯)
   Cola no FIM do CSS
   ========================= */
:root{
  --z-bottomnav: 9000;
  --z-floating: 20050;
  --z-modal-backdrop: 30000;
  --z-modal: 30010;
}

/* se tiveres bottom nav */
.hr-bottomnav{ z-index: var(--z-bottomnav) !important; }

/* backdrop + modal sempre acima */
.modal-backdrop{ z-index: var(--z-modal-backdrop) !important; }
.modal{ z-index: var(--z-modal) !important; }

/* IMPORTANTÍSSIMO: não cortar dropdowns dentro da modal */
.modal{ overflow: visible !important; }

/* mantém o scroll no corpo (já tens isto em #form-colaborador) */
.modal-body,
#form-colaborador{
  overflow-y: auto;
  min-height: 0;
}

/* menus ⋯ sempre acima */
.actions-menu{
  z-index: var(--z-floating) !important;
}
/* ✅ Mobile: sidebar ocupar a altura total do dispositivo e ter scroll interno */
@media (max-width: 900px) {
  /* quando a sidebar está aberta (no teu layout: .sidebar-collapsed abre em mobile) */
  .app-shell.sidebar-collapsed .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;

    height: 100dvh;       /* altura real do ecrã em mobile */
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 900px){
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;

    height: 100dvh;        /* altura real do device */
    max-height: 100dvh;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* evita ficar “por baixo” da bottom bar quando aberta */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}
/* o “cartão branco” do modal tem de ser o contexto */
#configEmpresaModal{
  position: relative !important;
}

/* cola o footer no fundo do modal */
#configEmpresaModal .modal-footer{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  background: #fff !important;
  border-top: 1px solid rgba(148,163,184,.35) !important;
  z-index: 50 !important;
}

/* dá espaço no conteúdo para não ficar tapado pelo footer */
#configEmpresaModal #formConfigEmpresa{
  padding-bottom: 80px !important; /* ajusta 70~100 conforme a altura do footer */
}
/* Modal Config Empresa sempre centrado no viewport */
#configEmpresaModal{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  /* mantém o tamanho/limites */
  max-height: 85vh !important;
  overflow: auto !important;

  /* garante que fica por cima */
  z-index: 100000 !important;

  /* evita margens que possam empurrar */
  margin: 0 !important;
}
/* ====== DESKTOP / GERAL: modal centrado ====== */
#configEmpresaModal{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(920px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;

  z-index: 100000 !important;
  margin: 0 !important;
}

/* ====== MOBILE: ocupar o ecrã TODO ====== */
@media (max-width: 768px){
  #configEmpresaModal{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;

    width: 100vw !important;
    height: 100dvh !important;     /* melhor em iPhone (dynamic viewport) */
    max-height: none !important;

    border-radius: 0 !important;   /* fica “full screen” */
    overflow: auto !important;
  }
}

/* ============================================================
   ✅ ESCALAS (TAB ESCALA) — FIX DEFINITIVO IGUAL AO PRINT
   (COLAR NO FIM DO hr.css, sem mexer no HTML/JS)
   ============================================================ */

:root{
  --esc-dia-w: 92px;          /* largura de cada dia (pílula). Ajusta 88–98 se quiseres */
  --esc-colab-w: 180px;       /* largura coluna colaborador */
  --esc-pill-radius: 999px;
}

/* ---------- CARD / WRAPPER (scroll só aqui se faltar espaço) ---------- */
#tab-escala #card-escala-grelha .table-wrapper.no-shadow{
  width: 100% !important;
  max-width: 100% !important;

  background: #f3f4f6 !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;

  overflow-x: auto !important;      /* ✅ se não couber, scroll só aqui */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;

  text-align: left !important;      /* evita “centrar” */
}

/* ---------- TABELA: não esmagar, crescer pela soma das colunas ---------- */
#tab-escala #card-escala-grelha .table-wrapper.no-shadow table{
  border-collapse: collapse !important;
  border-spacing: 0 !important;

  width: max-content !important;     /* ✅ mantém pílulas com largura fixa */
  table-layout: auto !important;     /* ✅ respeita widths */
  max-width: none !important;
  margin: 0 !important;
}

/* ---------- CELULAS BASE ---------- */
#tab-escala #card-escala-grelha th,
#tab-escala #card-escala-grelha td{
  box-sizing: border-box !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* ---------- COLUNA COLABORADOR ---------- */
#tab-escala #card-escala-grelha thead th.escala-colaborador-header,
#tab-escala #card-escala-grelha tbody td.escala-colaborador-cell{
  width: var(--esc-colab-w) !important;
  min-width: var(--esc-colab-w) !important;
  max-width: var(--esc-colab-w) !important;

  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-weight: 600 !important;
  color: #111827 !important;
  background: transparent !important;

  padding: 6px 10px !important;
}

/* ---------- CABEÇALHOS DOS DIAS (seg. 01, ter. 02...) ---------- */
#tab-escala #card-escala-grelha thead th.escala-dia-header,
#tab-escala #card-escala-grelha thead th.escala-dia-header--weekday,
#tab-escala #card-escala-grelha thead th.escala-dia-header--weekend{
  width: var(--esc-dia-w) !important;
  min-width: var(--esc-dia-w) !important;
  max-width: var(--esc-dia-w) !important;

  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;

  padding: 6px 8px !important;
  border-radius: var(--esc-pill-radius) !important;

  background: #e5e7eb !important;   /* cinza claro como no print */
  color: #111827 !important;
}

/* ---------- CÉLULAS DOS DIAS: largura fixa + “pílula” ---------- */
#tab-escala #card-escala-grelha tbody td.escala-celula-dia{
  width: var(--esc-dia-w) !important;
  min-width: var(--esc-dia-w) !important;
  max-width: var(--esc-dia-w) !important;

  padding: 0 !important;
  border-radius: var(--esc-pill-radius) !important;
}

/* weekday / weekend fundo da pílula */
#tab-escala #card-escala-grelha tbody td.escala-celula-dia--weekday{
  background: #4b5563 !important;
}
#tab-escala #card-escala-grelha tbody td.escala-celula-dia--weekend{
  background: #04c6b2 !important;
}

/* ---------- 2 selects empilhados (Estab em cima, Turno em baixo) ---------- */
#tab-escala #card-escala-grelha .escala-celula-inner{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* ambos os selects */
#tab-escala #card-escala-grelha .escala-celula-inner select{
  width: 100% !important;
  max-width: 100% !important;

  height: 22px !important;
  line-height: 22px !important;

  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;

  border: 0 !important;
  outline: 0 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Estabelecimento (topo) claro */
#tab-escala #card-escala-grelha select.escala-celula-estab{
  background: #f3f4f6 !important;
  color: #111827 !important;

  border: 1px solid #d1d5db !important;
  border-bottom: 0 !important;

  border-radius: var(--esc-pill-radius) var(--esc-pill-radius) 0 0 !important;
}

/* Turno (baixo): transparente para “mostrar” a cor do dia */
#tab-escala #card-escala-grelha select.escala-celula-turno-select{
  background: transparent !important;
  color: #ffffff !important;

  border-radius: 0 0 var(--esc-pill-radius) var(--esc-pill-radius) !important;
}

/* options visíveis quando abre */
#tab-escala #card-escala-grelha select option{
  color: #111827 !important;
}

/* ---------- Folga / Férias (pinta os dois selects) ---------- */
#tab-escala #card-escala-grelha td.escala-celula-dia--folga,
#tab-escala #card-escala-grelha td.escala-celula-dia--folga select{
  background-color: #0f766e !important;
  color: #ecfdf5 !important;
  border-color: transparent !important;
}

#tab-escala #card-escala-grelha td.escala-celula-dia--ferias,
#tab-escala #card-escala-grelha td.escala-celula-dia--ferias select{
  background-color: #f97316 !important;
  color: #111827 !important;
  border-color: transparent !important;
}

/* ---------- Separador de linhas (como no teu tema) ---------- */
#tab-escala #card-escala-grelha tbody tr > *{
  border-bottom: 1px solid rgba(148, 163, 184, 0.45) !important;
}
#tab-escala #card-escala-grelha tbody tr:last-child > *{
  border-bottom: none !important;
}

/* ---------- PAGINAÇÃO (prev | info | next) ---------- */
#tab-escala #card-escala-grelha .escala-paginacao{
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

#tab-escala #card-escala-grelha #escala-info{
  flex: 1 1 auto !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #64748b !important;
}

/* ---------- MOBILE: mantém igual, só permite scroll no card ---------- */
@media (max-width: 900px){
  #tab-escala #card-escala-grelha .table-wrapper.no-shadow{
    padding: 10px 10px !important;
    border-radius: 18px !important;
  }
  /* mantém as larguras fixas (não esmagar) */
  #tab-escala #card-escala-grelha .table-wrapper.no-shadow table{
    width: max-content !important;
  }
}

@media (max-width: 480px){
  #tab-escala #card-escala-grelha .table-wrapper.no-shadow{
    padding: 8px 8px !important;
    border-radius: 16px !important;
  }
  #tab-escala #card-escala-grelha thead th.escala-dia-header{
    font-size: 10px !important;
    padding: 5px 6px !important;
  }
  #tab-escala #card-escala-grelha .escala-celula-inner select{
    height: 21px !important;
    line-height: 21px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }
}
/* ============================================================
   ✅ ESCALA — NEUTRALIZADOR (COLAR NO FIM DO hr.css)
   Mata regras antigas: width:100% + table-layout:fixed + overflow hidden
   ============================================================ */

:root{
  --esc-dia-w: 92px;
  --esc-colab-w: 180px;
  --esc-pill-radius: 999px;
}

/* 1) Wrapper: se faltar espaço, scroll é AQUI (nunca hidden) */
#tab-escala #card-escala-grelha .table-wrapper,
#tab-escala #card-escala-grelha .table-wrapper.no-shadow{
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  text-align: left !important;
}

/* 2) Tabela: anula “esticar 100% + fixed” */
#tab-escala #card-escala-grelha table{
  width: max-content !important;      /* cresce pela soma das colunas */
  max-width: none !important;
  min-width: 0 !important;

  table-layout: auto !important;      /* ✅ mata table-layout:fixed */
  margin: 0 !important;               /* ✅ mata margin:auto (centrar) */
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* 3) Células: nunca forçar %/calc antigos */
#tab-escala #card-escala-grelha th,
#tab-escala #card-escala-grelha td{
  width: auto !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  padding: 0 !important;
}

/* 4) Coluna colaborador fixa */
#tab-escala #card-escala-grelha thead th.escala-colaborador-header,
#tab-escala #card-escala-grelha tbody td.escala-colaborador-cell{
  width: var(--esc-colab-w) !important;
  min-width: var(--esc-colab-w) !important;
  max-width: var(--esc-colab-w) !important;

  padding: 6px 10px !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: transparent !important;
}

/* 5) Cabeçalhos dos dias: largura fixa (pílula) */
#tab-escala #card-escala-grelha thead th.escala-dia-header,
#tab-escala #card-escala-grelha thead th.escala-dia-header--weekday,
#tab-escala #card-escala-grelha thead th.escala-dia-header--weekend{
  width: var(--esc-dia-w) !important;
  min-width: var(--esc-dia-w) !important;
  max-width: var(--esc-dia-w) !important;

  padding: 6px 8px !important;
  border-radius: var(--esc-pill-radius) !important;
  background: #e5e7eb !important;
  color: #111827 !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* 6) Células dos dias: largura fixa + cor */
#tab-escala #card-escala-grelha tbody td.escala-celula-dia{
  width: var(--esc-dia-w) !important;
  min-width: var(--esc-dia-w) !important;
  max-width: var(--esc-dia-w) !important;

  border-radius: var(--esc-pill-radius) !important;
  padding: 0 !important;
}
#tab-escala #card-escala-grelha tbody td.escala-celula-dia--weekday{
  background: #4b5563 !important;
}
#tab-escala #card-escala-grelha tbody td.escala-celula-dia--weekend{
  background: #04c6b2 !important;
}

/* 7) Dois selects empilhados sem “engordar” */
#tab-escala #card-escala-grelha .escala-celula-inner{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}
#tab-escala #card-escala-grelha .escala-celula-inner select{
  width: 100% !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 0 !important;
  outline: 0 !important;
  box-sizing: border-box !important;
  appearance: none !important;
}

/* estab (topo) */
#tab-escala #card-escala-grelha select.escala-celula-estab{
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  border-bottom: 0 !important;
  border-radius: var(--esc-pill-radius) var(--esc-pill-radius) 0 0 !important;
}
/* turno (baixo) */
#tab-escala #card-escala-grelha select.escala-celula-turno-select{
  background: transparent !important;
  color: #ffffff !important;
  border-radius: 0 0 var(--esc-pill-radius) var(--esc-pill-radius) !important;
}

/* options sempre legíveis */
#tab-escala #card-escala-grelha select option{
  color: #111827 !important;
}

/* folga / ferias */
#tab-escala #card-escala-grelha td.escala-celula-dia--folga,
#tab-escala #card-escala-grelha td.escala-celula-dia--folga select{
  background-color: #0f766e !important;
  color: #ecfdf5 !important;
}
#tab-escala #card-escala-grelha td.escala-celula-dia--ferias,
#tab-escala #card-escala-grelha td.escala-celula-dia--ferias select{
  background-color: #f97316 !important;
  color: #111827 !important;
}

/* 8) Separadores */
#tab-escala #card-escala-grelha tbody tr > *{
  border-bottom: 1px solid rgba(148,163,184,.45) !important;
}
#tab-escala #card-escala-grelha tbody tr:last-child > *{
  border-bottom: none !important;
}

/* 9) Paginação */
#tab-escala #card-escala-grelha .escala-paginacao{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
#tab-escala #card-escala-grelha #escala-info{
  flex: 1 1 auto !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #64748b !important;
}

/* 10) ✅ “ANTI CUSTOM-SELECT” dentro da grelha (se existir .cs) */
#tab-escala #card-escala-grelha .cs{
  display: block !important;
  position: static !important;
  width: 100% !important;
}
#tab-escala #card-escala-grelha .cs > select{
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#tab-escala #card-escala-grelha .cs-trigger{
  display: none !important; /* esconde o “fake select” dentro da escala */
}
/* ============================================================
   ✅ FIX DEFINITIVO (DESKTOP) — Botões Cancelar/Guardar SEMPRE EM BAIXO
   Aplica a: Nova vaga / Novo curso / Abonos
   (anula max-height antigos e empurra botões para o fundo)
   ============================================================ */

@media (min-width: 901px){

  /* --------- 1) Modal vira coluna e limita altura --------- */
  #modal-vaga .modal.modal-sm,
  #modal-curso .modal.modal-sm,
  #modal-movimento .modal.modal-sm{
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
    height: auto !important;
  }

  /* --------- 2) Header fixo (não encolhe) --------- */
  #modal-vaga .modal-header,
  #modal-curso .modal-header,
  #modal-movimento .modal-header{
    flex: 0 0 auto !important;
  }

  /* --------- 3) Form vira coluna e ocupa o “meio” --------- */
  #modal-vaga #form-vaga,
  #modal-curso #form-curso,
  #modal-movimento #form-movimento{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;  /* 🔥 necessário para scroll interno */
  }

  /* --------- 4) O corpo (campos) é que faz scroll — anula max-height:60vh --------- */
  #modal-vaga #form-vaga .form-grid,
  #modal-curso #form-curso .form-grid,
  #modal-movimento #form-movimento .form-grid{
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    max-height: none !important;     /* ✅ anula o inline 60vh */
    height: auto !important;

    /* dá espaço para não ficar tapado pelo footer sticky */
    padding-bottom: 76px !important;
  }

  /* --------- 5) Footer dos botões: colado ao fundo (sticky) --------- */
  #modal-vaga .modal-footer,
  #modal-curso .modal-footer,
  #modal-movimento .modal-footer{
    flex: 0 0 auto !important;
    margin-top: auto !important;

    position: sticky !important;
    bottom: 0 !important;

    background: #fff !important;
    border-top: 1px solid rgba(148,163,184,.35) !important;
    z-index: 10 !important;
  }

  /* --------- 6) CASO os botões NÃO estejam em .modal-footer (alguns layouts) ---------
     força qualquer “linha de ações” dentro da .form-grid a comportar-se como footer */
  #modal-vaga #form-vaga .form-grid .form-actions,
  #modal-curso #form-curso .form-grid .form-actions,
  #modal-movimento #form-movimento .form-grid .form-actions,
  #modal-vaga #form-vaga .form-grid .form-actions-resp-dep,
  #modal-curso #form-curso .form-grid .form-actions-resp-dep,
  #modal-movimento #form-movimento .form-grid .form-actions-resp-dep{
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;

    background: #fff !important;
    border-top: 1px solid rgba(148,163,184,.35) !important;
    z-index: 10 !important;

    padding: 12px 22px !important;
  }

  /* --------- 7) Se o teu CSS antigo tiver “overflow:hidden” em algum wrapper do modal --------- */
  #modal-vaga .modal,
  #modal-curso .modal,
  #modal-movimento .modal{
    overflow: hidden !important; /* o scroll é no .form-grid */
  }
}
/* =========================================================
   HR — DESKTOP FIX (>= 992px)
   Coloca ISTO no FIM do CSS para ganhar ao resto.
   ========================================================= */
@media (min-width: 992px) {

  /* ---------- 1) Título + botão na mesma linha ---------- */
  body :is(#tab-formacao, #tab-recrutamento) .titulo-bar{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  body :is(#tab-formacao, #tab-recrutamento) .titulo-bar .btn,
  body :is(#tab-formacao, #tab-recrutamento) .titulo-bar button{
    width: auto !important;
    margin-top: 0 !important;     /* anula “empurrar pra baixo” */
    white-space: nowrap !important;
  }

  /* ---------- 2) Linha dos filtros “normal” no desktop ---------- */
  body :is(#tab-formacao, #tab-recrutamento) .filtros-bar{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 10px !important;

    /* no desktop mantém “normal”; se a janela apertar, isto evita caos */
    flex-wrap: wrap !important;
  }

  /* cada bloco do filtro NÃO fica 100% */
  body :is(#tab-formacao, #tab-recrutamento) .filtros-bar > *{
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    max-width: none !important;
  }

  /* inputs/selects NÃO esticam a 100% no desktop */
  body :is(#tab-formacao, #tab-recrutamento) .filtros-bar input,
  body :is(#tab-formacao, #tab-recrutamento) .filtros-bar select,
  body :is(#tab-formacao, #tab-recrutamento) .filtros-bar .select2-container{
    width: auto !important;
    min-width: 140px !important;
  }

  /* ---------- 3) Botões Filtrar / Repor lado a lado ---------- */
  body :is(#tab-formacao, #tab-recrutamento) .filtros-acoes{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin-top: 0 !important;
  }

  body :is(#tab-formacao, #tab-recrutamento) .filtros-acoes .btn,
  body :is(#tab-formacao, #tab-recrutamento) .filtros-acoes button{
    width: auto !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   IMPORTANTE:
   As tuas regras MOBILE têm de ficar DENTRO disto, senão
   continuam a “sujar” o desktop:
   ========================================================= */
/*
@media (max-width: 991.98px){
  ... tuas regras mobile ...
}
*/
/* =========================================================
   DESKTOP OVERRIDE — Formação + Recrutamento
   (cola no FIM do hr.css)
   ========================================================= */
@media (min-width: 992px){

  /* ---------- HEADER: título + botão na mesma linha ---------- */
  body #tab-formacao .panel-header,
  body #tab-recrutamento .panel-header{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  body #tab-formacao .panel-actions,
  body #tab-recrutamento .panel-actions{
    width: auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  /* ---------- FILTROS: Estado / Ano / Botões numa linha “desktop” ---------- */
  body #tab-formacao #filtro-formacao-wrapper,
  body #tab-recrutamento #filtro-vagas-wrapper{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;     /* ✅ desktop não quebra */
  }

  /* grupos não podem virar 100% */
  body #tab-formacao #filtro-formacao-wrapper .filter-group,
  body #tab-recrutamento #filtro-vagas-wrapper .filter-group{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* inputs/selects não podem esticar a 100% no desktop */
  body #tab-formacao #filtro-formacao-wrapper .filter-group select,
  body #tab-formacao #filtro-formacao-wrapper .filter-group input,
  body #tab-recrutamento #filtro-vagas-wrapper .filter-group select,
  body #tab-recrutamento #filtro-vagas-wrapper .filter-group input{
    width: auto !important;
    min-width: 140px !important;
    max-width: none !important;
  }

  /* botões Filtrar/Repor lado a lado (sem ir para baixo) */
  body #tab-formacao #filtro-formacao-wrapper .filter-actions,
  body #tab-recrutamento #filtro-vagas-wrapper .filter-actions{
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  body #tab-formacao #filtro-formacao-wrapper .filter-actions button,
  body #tab-recrutamento #filtro-vagas-wrapper .filter-actions button{
    width: auto !important;
    white-space: nowrap !important;
  }

  /* ---------- IMPORTANTE: neutraliza “base mobile” que vale para todos ---------- */
  /* (tu tens .filter-bar { flex-wrap: wrap; } fora de media) */
  body #tab-formacao .filter-bar,
  body #tab-recrutamento .filter-bar{
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
  }
}
/* =========================================================
   ✅ KILL SWITCH — Custom Select NÃO AFETA ESCALA (FORÇADO)
   Colar no FIM do hr.css
   ========================================================= */

/* 1) Dentro da Escala: mata o fake select e deixa só o select real */
#tab-escala .cs[data-cs="1"]{
  display: block !important;
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
}

#tab-escala .cs[data-cs="1"] > select{
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* o botão fake (que abre o bottom sheet) nunca aparece na Escala */
#tab-escala .cs[data-cs="1"] .cs-trigger{
  display: none !important;
}

/* 2) Se por algum motivo o “bottom sheet” existir, na Escala nunca abre */
#tab-escala .cs-sheet-backdrop,
#tab-escala .cs-sheet,
#tab-escala .cs-sheet-backdrop.open,
#tab-escala .cs-sheet.open{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 3) Desktop: garante que NÃO aparece sheet/trigger em lado nenhum */
@media (min-width: 681px){
  .cs-sheet-backdrop,
  .cs-sheet-backdrop.open,
  .cs-sheet,
  .cs-sheet.open{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* se algum select tiver sido embrulhado, o select continua visível */
  .cs[data-cs="1"] > select{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* 4) Extra: se a Escala tiver selects de plugins (Select2/Choices), prioridade total */
#tab-escala .select2-container,
#tab-escala .choices{
  width: 100% !important;
  max-width: 100% !important;
}
/* ============================================================
   HARD OFF — Custom Select NÃO PODE tocar na ESCALA + DESKTOP
   Cola no FIM do hr.css
   ============================================================ */

/* 1) ESCALA: nunca usar custom select (se embrulhou, desfaz visualmente) */
#tab-escala .cs[data-cs="1"],
#tab-escala .cs[data-cs="1"] > select{
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
}

#tab-escala .cs[data-cs="1"] .cs-trigger,
#tab-escala .cs[data-cs="1"] .cs-menu{
  display: none !important;
}

/* sheet (fica no body) nunca pode abrir por causa da escala */
.cs-sheet-backdrop[data-cs="1"],
.cs-sheet[data-cs="1"]{
  /* só escondemos MESMO quando a escala estiver ativa no DOM */
}
#tab-escala ~ .cs-sheet-backdrop[data-cs="1"],
#tab-escala ~ .cs-sheet[data-cs="1"]{
  display: none !important;
}

/* 2) DESKTOP: nunca mostrar trigger/sheet (mesmo se cs-enabled aparecer) */
@media (min-width: 681px){
  .cs[data-cs="1"] > select{
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }
  .cs[data-cs="1"] .cs-trigger,
  .cs[data-cs="1"] .cs-menu,
  .cs-sheet-backdrop[data-cs="1"],
  .cs-sheet[data-cs="1"]{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ============================================================
   ✅ KILL SWITCH — INPUTS/SELECTS A ESTICAR (DESKTOP)
   Cola no FIM do hr.css
   - Desktop: inputs/selects NÃO podem ficar 100% por causa de regras antigas
   - Mobile: mantém 100% (não mexe no teu comportamento mobile)
   ============================================================ */

/* =========================
   1) ESCALA — FILTROS (MÊS + ESTAB.) NORMAL NO DESKTOP
   ========================= */
@media (min-width: 769px){

  /* wrapper dos filtros da escala */
  #tab-escala #escala-periodo-mes-wrapper{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* grupos NÃO podem ser flex:1 */
  #tab-escala #escala-periodo-mes-wrapper .filter-group{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
  }

  /* inputs/selects NÃO podem ter width:100% */
  #tab-escala #escala-periodo-mes-wrapper .filter-group input,
  #tab-escala #escala-periodo-mes-wrapper .filter-group select{
    width: auto !important;
    max-width: none !important;
    min-width: 160px !important;  /* ajusta se quiseres */
  }

  /* botões não vão para linha de baixo no desktop */
  #tab-escala #escala-periodo-mes-wrapper .filter-actions{
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-actions button{
    width: auto !important;
    white-space: nowrap !important;
  }
}


/* =========================
   2) DESKTOP GLOBAL — BARRAS DE FILTROS “NORMAIS”
   (mata o efeito de inputs 100% fora do mobile)
   ========================= */
@media (min-width: 992px){

  /* qualquer filter-bar dentro de card */
  body .card .filter-bar{
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* grupos deixam de ser elásticos */
  body .card .filter-bar .filter-group{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
  }

  /* inputs/selects deixam de esticar */
  body .card .filter-bar .filter-group input,
  body .card .filter-bar .filter-group select{
    width: auto !important;
    max-width: none !important;
    min-width: 140px !important;
  }

  /* ações ficam ao lado (Filtrar/Repor) */
  body .card .filter-bar .filter-actions{
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  body .card .filter-bar .filter-actions button{
    width: auto !important;
    white-space: nowrap !important;
  }
}


/* =========================
   3) MOBILE — NÃO MEXE
   (se quiseres reforçar 100% no mobile, mantém assim)
   ========================= */
@media (max-width: 900px){
  /* opcional: manter o teu comportamento full-width em mobile */
  .card .filter-bar .filter-group input,
  .card .filter-bar .filter-group select{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ============================================================
   ✅ KILL SWITCH v2 — DESKTOP (ESCALAS)
   Corrige "selects/inputs a esticar" quando o select é Select2
   Cola NO FIM do hr.css
   ============================================================ */

/* ---------- DESKTOP ---------- */
@media (min-width: 901px){

  /* barra de filtros da escala: tudo em linha */
  #tab-escala #escala-periodo-mes-wrapper{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 12px !important;
    width: auto !important;
  }

  /* grupos não podem ser flex:1 */
  #tab-escala #escala-periodo-mes-wrapper .filter-group,
  #tab-escala #escala-periodo-mes-wrapper .form-group{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* inputs normais não esticam */
  #tab-escala #escala-periodo-mes-wrapper input[type="text"],
  #tab-escala #escala-periodo-mes-wrapper input[type="search"],
  #tab-escala #escala-periodo-mes-wrapper input[type="month"],
  #tab-escala #escala-periodo-mes-wrapper input[type="date"]{
    width: auto !important;
    min-width: 160px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* SELECT NATIVO (se existir) */
  #tab-escala #escala-periodo-mes-wrapper select{
    width: auto !important;
    min-width: 220px !important;
    max-width: none !important;
  }

  /* ✅ SELECT2 (o teu caso) — é ISTO que estava a forçar 100% */
  #tab-escala #escala-periodo-mes-wrapper .select2-container,
  #tab-escala #escala-periodo-mes-wrapper .select2-container--default{
    width: auto !important;
    min-width: 220px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
  }

  /* a “caixa” do select2 ocupa o container, sem esticar o layout */
  #tab-escala #escala-periodo-mes-wrapper .select2-container .select2-selection{
    width: 100% !important;
  }

  /* botões não quebram linha */
  #tab-escala #escala-periodo-mes-wrapper .filter-actions{
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  #tab-escala #escala-periodo-mes-wrapper .filter-actions button{
    width: auto !important;
    white-space: nowrap !important;
  }
}

/* ---------- MOBILE (mantém 100%) ---------- */
@media (max-width: 900px){
  #tab-escala #escala-periodo-mes-wrapper{
    flex-wrap: wrap !important;
  }

  #tab-escala #escala-periodo-mes-wrapper input,
  #tab-escala #escala-periodo-mes-wrapper select,
  #tab-escala #escala-periodo-mes-wrapper .select2-container{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* ============================================================
   ✅ DESKTOP HARD RESET — NUNCA mostrar .cs-trigger em telas grandes
   (mesmo que algum JS embrulhe selects por engano)
   ============================================================ */
@media (min-width: 681px){
  html body .cs[data-cs="1"]{
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    position: static !important;
    flex: 0 0 auto !important;
  }

  /* mostra o select normal */
  html body .cs[data-cs="1"] > select{
    position: static !important;
    inset: auto !important;

    opacity: 1 !important;
    pointer-events: auto !important;

    width: auto !important;
    max-width: 100% !important;
    height: auto !important;

    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

  /* mata o botão custom no desktop */
  html body .cs[data-cs="1"] > .cs-trigger{
    display: none !important;
  }

  /* sheet nunca no desktop */
  html body .cs-sheet-backdrop[data-cs="1"],
  html body .cs-sheet[data-cs="1"]{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   ✅ FIX DE SINTAXE — se tiveres este bloco, garante que está assim
   (tu tinhas um } a mais no .cs-dot e isso pode quebrar CSS depois)
   ============================================================ */
@media (max-width: 680px){
  html body .cs-dot{
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.55);
    flex: 0 0 auto;
  }
}

/* ============================================================
   ✅ FILTROS EM DESKTOP — não “cortar” campos (quebra linha)
   ============================================================ */
@media (min-width: 769px){
  html body .filter-bar,
  html body .filters,
  html body .toolbar,
  html body .table-filters{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-end !important;
    overflow: visible !important;
  }

  html body .filter-bar .form-group,
  html body .filters .form-group,
  html body .toolbar .form-group{
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 100% !important;
  }

  /* pesquisa maior */
  html body input[placeholder*="Pesquis"],
  html body input[placeholder*="Pesquisar"],
  html body input[type="search"]{
    width: clamp(240px, 28vw, 560px) !important;
    min-width: 240px !important;
    max-width: 100% !important;
  }

  /* selects com tamanho decente */
  html body select{
    max-width: 100% !important;
  }

  /* evita dropdown cortado por overflow */
  html body .card,
  html body .card-body,
  html body .table-responsive{
    overflow: visible !important;
  }
}
/* ============================================================
   DESKTOP FIX (>= 681px) — NUNCA mostrar cs-trigger no desktop
   e manter filtros alinhados sem cortes
   ============================================================ */
@media (min-width: 681px){

  /* se alguém embrulhar select em .cs, no desktop o select fica normal */
  html body .cs[data-cs="1"]{
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
  }

  html body .cs[data-cs="1"] > select{
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;

    opacity: 1 !important;
    pointer-events: auto !important;

    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

  /* 🔥 no desktop o botão do custom select nunca aparece */
  html body .cs[data-cs="1"] .cs-trigger{
    display: none !important;
  }

  /* sheet do mobile nunca aparece no desktop */
  html body .cs-sheet-backdrop[data-cs="1"],
  html body .cs-sheet[data-cs="1"]{
    display: none !important;
  }

  /* alinhamento de filtros: pode quebrar linha sem cortar campos */
  html body .filter-bar,
  html body .filters,
  html body .toolbar,
  html body .table-filters{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  /* inputs e selects em filtros: tamanhos “bons” */
  html body input[type="search"],
  html body input[placeholder*="Pesquis"],
  html body input[placeholder*="Pesquisar"]{
    width: clamp(240px, 28vw, 560px) !important;
    min-width: 240px !important;
    max-width: 100% !important;
  }
}
/* ============================================================
   🚫 DESKTOP KILL SWITCH — CUSTOM SELECT NUNCA AFETA DESKTOP
   - independe de largura (mesmo janela estreita)
   - mata o .cs-trigger e volta a mostrar o <select> nativo
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

  /* wrapper não pode mexer no layout */
  html body .cs[data-cs="1"]{
    display: contents !important; /* wrapper “desaparece” */
  }

  /* select volta a ser nativo e clicável */
  html body .cs[data-cs="1"] > select{
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;

    opacity: 1 !important;
    pointer-events: auto !important;

    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

  /* trigger NUNCA aparece no desktop */
  html body .cs[data-cs="1"] > .cs-trigger{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* sheet nunca aparece */
  html body .cs-sheet-backdrop[data-cs="1"],
  html body .cs-sheet[data-cs="1"]{
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
/* ============================================================
   ABONOS — FILTRO EM MOBILE IGUAL AO DE FÉRIAS
   (cola no FIM do hr.css)
   ============================================================ */

@media (max-width: 900px){

  /* A barra toda usa a largura do card e pode quebrar */
  #tab-abonos .filter-bar{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px 12px !important;

    /* remove “margens/paddings fantasma” que fazem sair do card */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cada grupo vira mini-coluna (label em cima, campo em baixo) */
  #tab-abonos .filter-bar .filter-group{
    flex: 1 1 150px !important;
    min-width: 140px !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;

    box-sizing: border-box !important;
  }

  /* Inputs / selects SEMPRE dentro do card */
  #tab-abonos .filter-bar .filter-group input,
  #tab-abonos .filter-bar .filter-group select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ações (Filtrar/Repor/etc.) vão para baixo e não rebentam */
  #tab-abonos .filter-bar .filter-actions{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;   /* igual ao que fizeste em Férias/Ponto */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    box-sizing: border-box !important;
  }

  /* Botões partilham largura disponível (não empurram layout) */
  #tab-abonos .filter-bar .filter-actions .btn-filter,
  #tab-abonos .filter-bar .filter-actions .btn-ghost-sm{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

/* Telemóvel pequeno: se quiseres, permite botões em “stack” (opcional) */
@media (max-width: 480px){
  #tab-abonos .filter-bar .filter-actions{
    flex-wrap: wrap !important;
  }

  #tab-abonos .filter-bar .filter-actions .btn-filter,
  #tab-abonos .filter-bar .filter-actions .btn-ghost-sm{
    width: 100% !important;
    max-width: 260px !important;
  }
}
/* ============================================================
   SALÁRIOS — FILTRO EM MOBILE (igual ao de FÉRIAS/ABONOS)
   (cola no FIM do hr.css)
   ============================================================ */

@media (max-width: 900px){

  /* A barra toda usa a largura do card e pode quebrar */
  #tab-salarios .filter-bar{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px 12px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cada grupo vira mini-coluna */
  #tab-salarios .filter-bar .filter-group{
    flex: 1 1 150px !important;
    min-width: 140px !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;

    box-sizing: border-box !important;
  }

  /* Inputs / selects SEMPRE dentro do card */
  #tab-salarios .filter-bar .filter-group input,
  #tab-salarios .filter-bar .filter-group select{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- Período (salários): inicio até fim --- */
  /* Se os 2 inputs estiverem no mesmo grupo, mete-os lado a lado sem rebentar */
  #tab-salarios .filter-bar .filter-group:has(#filtro-salarios-inicio):has(#filtro-salarios-fim){
    width: 100% !important;
    max-width: 100% !important;
  }

  #tab-salarios .filter-bar .filter-group:has(#filtro-salarios-inicio):has(#filtro-salarios-fim) .range-row,
  #tab-salarios .filter-bar .filter-group:has(#filtro-salarios-inicio):has(#filtro-salarios-fim){
    /* fallback: se não houver .range-row, continua ok */
  }

  /* Garante que os dois inputs não “estouram” */
  #tab-salarios #filtro-salarios-inicio,
  #tab-salarios #filtro-salarios-fim{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ações (Filtrar/Repor/etc.) vão para baixo e não rebentam */
  #tab-salarios .filter-bar .filter-actions{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    box-sizing: border-box !important;
  }

  /* Botões partilham largura disponível */
  #tab-salarios .filter-bar .filter-actions .btn-filter,
  #tab-salarios .filter-bar .filter-actions .btn-ghost-sm{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

/* Telemóvel pequeno: botões em “stack” (opcional) */
@media (max-width: 480px){
  #tab-salarios .filter-bar .filter-actions{
    flex-wrap: wrap !important;
  }

  #tab-salarios .filter-bar .filter-actions .btn-filter,
  #tab-salarios .filter-bar .filter-actions .btn-ghost-sm{
    width: 100% !important;
    max-width: 260px !important;
  }
}
/* ============================================================
   ESCALAS — em mobile: SÓ o botão "Copiar escala..." vai para baixo
   (não mexe nos outros)
   ============================================================ */
@media (max-width: 480px){

  /* a linha dos botões pode quebrar */
  #tab-escala #escala-periodo-mes-wrapper .filter-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }

  /* 🔒 garante que os outros botões NÃO mudam (width auto, sem flex:1) */
  #tab-escala #escala-periodo-mes-wrapper .filter-actions > button{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ✅ só o "Copiar" desce e ocupa a linha toda */
  #tab-escala #escala-periodo-mes-wrapper #escala-mes-copiar{
    order: 999 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    justify-content: center !important; /* opcional */
  }
}

/* ============================================================
   TOPBAR (DESKTOP) — pesquisa volta a ocupar o espaço disponível
   ============================================================ */
@media (min-width: 901px){

  /* garante layout flex na topbar */
  .topbar{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* a caixa da pesquisa é a que cresce */
  .topbar .search-box{
    flex: 1 1 auto !important;    /* <<< isto é o principal */
    min-width: 360px !important;  /* evita ficar “curta” */
    max-width: none !important;   /* deixa ocupar o espaço */
  }

  /* o input ocupa 100% da search-box */
  .topbar .search-box #topbar-search{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   RH — MODAL "NOVO PEDIDO DE FÉRIAS" + "NOVA AUSÊNCIA"
   Botões (Cancelar/Registar) FIXOS em baixo + scroll no corpo
   ============================================================ */
@media (min-width: 1px){

  /* modal (container branco) vira coluna */
  #modal-ferias-rh .modal,
  #modal-ausencia-rh .modal{
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;   /* desktop */
    height: auto !important;
    overflow: hidden !important;   /* scroll fica no corpo */
  }

  /* form ocupa o meio do modal */
  #modal-ferias-rh form,
  #modal-ausencia-rh form{
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;      /* necessário p/ overflow funcionar */
  }

  /* corpo do formulário: é aqui que faz scroll */
  #modal-ferias-rh form .form-grid,
  #modal-ausencia-rh form .form-grid{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 74px !important; /* espaço p/ footer não tapar */
  }

  /* footer: colado em baixo SEMPRE */
  #modal-ferias-rh .modal-footer,
  #modal-ausencia-rh .modal-footer{
    flex: 0 0 auto !important;
    margin-top: auto !important;

    position: sticky !important;
    bottom: 0 !important;

    background: #fff !important;
    border-top: 1px solid rgba(148,163,184,.35) !important;
    z-index: 5 !important;
  }
}

/* mobile: modal já é full screen no teu CSS — só garantimos alturas */
@media (max-width: 480px){
  #modal-ferias-rh .modal,
  #modal-ausencia-rh .modal{
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
}
/* ============================================================
   MODAL "REGISTOS DE PONTO"
   ✅ Fechar SEMPRE em baixo (pouco ou muito conteúdo)
   ✅ Scroll só no corpo (tabela)
   ✅ Sem mexer em HTML/JS
   ============================================================ */

/* ---------- DESKTOP ---------- */
@media (min-width: 901px){

  /* Backdrop ocupa o ecrã */
  #modal-ponto.modal-backdrop.open,
  #modal-ponto.modal-backdrop.open.show{
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    z-index: 30000 !important;
  }

  /* Modal centrado e com altura fixa */
  #modal-ponto .modal{
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: min(760px, calc(100vw - 48px)) !important;
    height: 82vh !important;
    max-height: 82vh !important;

    border-radius: 18px !important;
    overflow: hidden !important;

    /* 🔥 IMPORTANTE: o footer vai ser absolute DENTRO do modal */
    z-index: 30010 !important;
  }

  /* header normal */
  #modal-ponto .modal-header{
    position: relative !important;
    z-index: 2 !important;
  }

  /* ✅ Conteúdo: scroll aqui (se existir modal-body) */
  #modal-ponto .modal-body{
    position: relative !important;
    height: calc(82vh - 64px) !important; /* espaço p/ header/foot (tolerante) */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* espaço real p/ não tapar as últimas linhas */
    padding-bottom: 90px !important;
  }

  /* ✅ Fallback: se o conteúdo estiver em table-wrapper */
  #modal-ponto .table-wrapper,
  #modal-ponto .table-wrapper.no-shadow{
    position: relative !important;
    height: calc(82vh - 64px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding-bottom: 90px !important;
    box-sizing: border-box !important;
  }

  /* ✅ O QUE FALTAVA: prender o FOOTER no fundo do modal */
  #modal-ponto .modal-footer{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    background: #fff !important;
    border-top: 1px solid rgba(148,163,184,.35) !important;

    padding: 10px 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;

    z-index: 5 !important;
  }

  /* botão Fechar sempre no fim (seja qual for a classe) */
  #modal-ponto #modal-ponto-fechar{
    margin-left: auto !important;
  }
}

/* ---------- MOBILE / TABLET (mantém fullscreen + footer em baixo) ---------- */
@media (max-width: 900px){

  #modal-ponto.modal-backdrop.open,
  #modal-ponto.modal-backdrop.open.show{
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
  }

  #modal-ponto .modal{
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;

    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 30010 !important;
  }

  #modal-ponto .modal-body,
  #modal-ponto .table-wrapper,
  #modal-ponto .table-wrapper.no-shadow{
    height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #modal-ponto .modal-footer{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid rgba(148,163,184,.35) !important;

    display: flex !important;
    justify-content: flex-end !important;
    z-index: 5 !important;
  }
}
/* ============================================================
   ESCALA — RESET TOTAL E DEFINITIVO
   (um único comportamento, todos os tamanhos)
   ============================================================ */

#tab-escala #card-escala-grelha .table-wrapper,
#tab-escala #card-escala-grelha .table-wrapper.no-shadow{
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;   /* 🔥 SEMPRE scroll se faltar espaço */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

/* tabela cresce pela soma das colunas */
#tab-escala #card-escala-grelha table{
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  table-layout: auto !important;
  border-collapse: collapse;
}

/* base das células */
#tab-escala #card-escala-grelha th,
#tab-escala #card-escala-grelha td{
  white-space: nowrap !important;
  box-sizing: border-box;
  vertical-align: middle;
}

/* colaborador */
#tab-escala #card-escala-grelha .escala-colaborador-header,
#tab-escala #card-escala-grelha .escala-colaborador-cell{
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

/* dias */
#tab-escala #card-escala-grelha .escala-dia-header,
#tab-escala #card-escala-grelha .escala-celula-dia{
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
}

/* selects nunca podem esticar */
#tab-escala #card-escala-grelha select{
  width: 100% !important;
  max-width: 100% !important;
}

/* paginação sempre visível */
#tab-escala #card-escala-grelha .escala-paginacao{
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
/* ============================================================
   FIX DEFINITIVO – MENU DOS 3 PONTINHOS
   Força comportamento correto em TODAS as telas
   ============================================================ */

/* 🔒 DEFAULT: desktop + tablet
   (anula qualquer regra mobile antiga) */
.actions .actions-menu,
.dep-action-menu {
  position: absolute !important;
  left: auto !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;

  max-width: 320px;
  width: auto;
  max-height: none;
  overflow: visible;

  z-index: 60;
}

/* 📱 MOBILE REAL APENAS */
@media (max-width: 640px) {
  .actions .actions-menu,
  .dep-action-menu {
    position: fixed !important;

    left: 16px !important;
    right: 16px !important;
    bottom: 20px !important;
    top: auto !important;

    width: auto !important;
    max-width: none !important;
    max-height: 60vh !important;

    overflow-y: auto !important;

    z-index: 2000 !important;
  }
}
/* SALÁRIOS: wrapper pode sempre fazer scroll horizontal */
#tab-salarios .table-wrapper{
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* A tabela não deve “espremer” colunas até cortar botões */
#tab-salarios .table-wrapper table{
  width: max-content;   /* força largura real -> scroll aparece logo que precise */
  min-width: 100%;      /* em ecrãs grandes ocupa o card */
  table-layout: auto;
}

/* Não quebrar textos (evita cabeçalhos em 2 linhas que estragam tudo) */
#tab-salarios th,
#tab-salarios td{
  white-space: nowrap;
}
/* ==========================
   SALÁRIOS — scroll horizontal sempre que necessário
   (sem scroll vertical interno)
   ========================== */

#tab-salarios .table-wrapper{
  max-width: 100%;
  overflow-x: auto !important;     /* <-- aparece a scrollbar quando faltar espaço */
  overflow-y: visible !important;  /* <-- sem scroll vertical interno */
  -webkit-overflow-scrolling: touch;
}

/* Faz a tabela NÃO “encolher” e sim criar overflow (logo, scroll) */
#tab-salarios .table-wrapper table{
  width: max-content;              /* tabela fica do tamanho do conteúdo */
  min-width: 100%;                 /* mas se couber, ocupa o card todo */
  table-layout: auto;
}

/* Evita partir texto e ajuda a acionar overflow */
#tab-salarios th,
#tab-salarios td{
  white-space: nowrap;
}
/* =========================================
   SALÁRIOS — SCROLL HORIZONTAL SEMPRE QUE PRECISAR
   (e garante que nenhum pai corta)
   ========================================= */

/* 1) Nenhum container acima pode cortar */
#tab-salarios,
#tab-salarios .card,
#tab-salarios .tab-panel,
#tab-salarios .content {
  overflow-x: visible !important;
}

/* 2) O wrapper da tabela é o “scroll container” */
#tab-salarios .table-wrapper,
#tab-salarios .table-wrapper.no-shadow {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;     /* <- scrollbar aparece quando faltar largura */
  overflow-y: visible !important;  /* <- sem scroll vertical interno */
  -webkit-overflow-scrolling: touch;
}

/* 3) A tabela TEM de poder ficar maior que o wrapper */
#tab-salarios .table-wrapper table {
  width: max-content !important;   /* <- impede “encolher” para caber */
  min-width: 100% !important;      /* <- se couber, ocupa tudo */
  border-collapse: collapse;
}

/* 4) Evita quebra e força colunas a manterem tamanho */
#tab-salarios th,
#tab-salarios td {
  white-space: nowrap;
}

/* 5) (Opcional mas ajuda MUITO) dá um mínimo às colunas para garantir overflow */
#tab-salarios th,
#tab-salarios td {
  min-width: 90px;
}
#tab-salarios th:nth-child(2),
#tab-salarios td:nth-child(2) {
  min-width: 160px; /* COLABORADOR */
}
/* ================================
   SALÁRIOS – tabela sempre adaptável
   (scroll horizontal quando precisar)
   ================================ */

#tab-salarios .table-wrapper {
  max-width: 100%;
  overflow-x: auto !important;     /* <-- ativa scroll horizontal */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

/* Faz a tabela poder ser mais larga que o card */
#tab-salarios .table-wrapper table {
  width: max-content;              /* cresce conforme as colunas */
  min-width: 100%;                 /* mas nunca menor que o card */
  border-collapse: collapse;
}

/* Evita “esmagar” texto e colunas */
#tab-salarios .table-wrapper th,
#tab-salarios .table-wrapper td {
  white-space: nowrap;
}

/* Opcional: scroll mais bonito */
#tab-salarios .table-wrapper::-webkit-scrollbar { height: 10px; }
#tab-salarios .table-wrapper::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}
#tab-salarios .table-wrapper::-webkit-scrollbar-track { background: transparent; }
/* ============================================================
   ✅ SALÁRIOS — FIX DEFINITIVO (cola no FIM do hr.css)
   - scroll horizontal sempre que necessário
   - funciona em TODOS os tamanhos (inclui widths intermédios)
   ============================================================ */

/* 1) Em layouts flex: permite o conteúdo encolher e o scroll aparecer */
.app-shell main.content,
.app-shell .content,
.app-shell .main,
#tab-salarios,
#tab-salarios .card,
#tab-salarios .card-body,
#tab-salarios .table-wrapper{
  min-width: 0 !important;
}

/* 2) o scroll tem de estar no wrapper da tabela */
#tab-salarios .table-wrapper,
#tab-salarios .table-wrapper.no-shadow{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  -webkit-overflow-scrolling: touch;
}

/* 3) a tabela tem de poder ser maior que o card (para gerar overflow) */
#tab-salarios .table-wrapper table{
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse;
}

/* 4) evita “esmagar” colunas / partir cabeçalhos */
#tab-salarios .table-wrapper th,
#tab-salarios .table-wrapper td{
  white-space: nowrap !important;
}

/* 5) (opcional) melhora a sensação do scroll */
#tab-salarios .table-wrapper{
  overscroll-behavior-x: contain;
}
/* ============================================================
   ✅ TABELAS RH — NUNCA SAIR FORA DO CARD
   Colaboradores + Férias/Ausências + Abonos + Recrutamento + Formação
   (scroll horizontal interno, igual a Salários)
   COLAR NO FIM DO hr.css
   ============================================================ */

/* 0) Garante que o card não “vaza” conteúdo para fora */
#tab-colaboradores .card,
#tab-ferias .card,
#tab-abonos .card,
#tab-recrutamento .card,
#tab-formacao .card{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* o scroll fica no wrapper da tabela */
}

/* 1) O wrapper da tabela é o ÚNICO scroll container */
#tab-colaboradores .table-wrapper,
#tab-colaboradores .table-wrapper.no-shadow,
#tab-ferias .table-wrapper,
#tab-ferias .table-wrapper.no-shadow,
#tab-abonos .table-wrapper,
#tab-abonos .table-wrapper.no-shadow,
#tab-recrutamento .table-wrapper,
#tab-recrutamento .table-wrapper.no-shadow,
#tab-formacao .table-wrapper,
#tab-formacao .table-wrapper.no-shadow{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  overflow-x: auto !important;   /* ✅ scroll horizontal quando precisar */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;

  /* evita “margens fantasma” que empurram para fora */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) A tabela NÃO pode encolher para caber — tem de criar overflow */
#tab-colaboradores .table-wrapper table,
#tab-ferias .table-wrapper table,
#tab-abonos .table-wrapper table,
#tab-recrutamento .table-wrapper table,
#tab-formacao .table-wrapper table{
  width: max-content !important;  /* ✅ cresce pelo conteúdo -> ativa overflow */
  min-width: 100% !important;     /* ✅ se couber, ocupa o card */
  max-width: none !important;

  table-layout: auto !important;
  border-collapse: collapse !important;

  margin: 0 !important;           /* evita centrar/empurrar */
}

/* 3) Evita quebra de linha que “finge” que cabe e estraga colunas */
#tab-colaboradores th,
#tab-colaboradores td,
#tab-ferias th,
#tab-ferias td,
#tab-abonos th,
#tab-abonos td,
#tab-recrutamento th,
#tab-recrutamento td,
#tab-formacao th,
#tab-formacao td{
  white-space: nowrap !important;
}

/* 4) Ajuda a garantir overflow em ecrãs intermédios (opcional, mas recomendado) */
#tab-colaboradores th, #tab-colaboradores td,
#tab-ferias th,        #tab-ferias td,
#tab-abonos th,        #tab-abonos td,
#tab-recrutamento th,  #tab-recrutamento td,
#tab-formacao th,      #tab-formacao td{
  min-width: 90px; /* base */
}

/* Coluna “Nome/Colaborador/Título” normalmente precisa mais */
#tab-colaboradores th:nth-child(2),
#tab-colaboradores td:nth-child(2),
#tab-ferias th:nth-child(1),
#tab-ferias td:nth-child(1),
#tab-abonos th:nth-child(1),
#tab-abonos td:nth-child(1),
#tab-recrutamento th:nth-child(1),
#tab-recrutamento td:nth-child(1),
#tab-formacao th:nth-child(1),
#tab-formacao td:nth-child(1){
  min-width: 160px;
}

/* 5) (Se tiveres wrappers acima a cortar, neutraliza só nestas tabs) */
#tab-colaboradores,
#tab-ferias,
#tab-abonos,
#tab-recrutamento,
#tab-formacao{
  overflow-x: visible !important;
}
/* ============================================================
   ✅ TABELAS RH — SEMPRE DENTRO DO CARD + SCROLL HORIZONTAL
   Aplica a: Colaboradores, Férias, Abonos, Recrutamento, Formação,
            Comunicados, Documentos, Utilizadores, Estrutura
   (igual ao comportamento de Salários)
   ============================================================ */

/* 0) garante que nenhum pai corta o scroll */
#tab-colaboradores .card,
#tab-ferias .card,
#tab-abonos .card,
#tab-recrutamento .card,
#tab-formacao .card,
#tab-comunicados .card,
#tab-documentos .card,
#tab-utilizadores .card,
#tab-estrutura .card{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 1) o wrapper é o SCROLL CONTAINER */
#tab-colaboradores .table-wrapper,
#tab-colaboradores .table-wrapper.no-shadow,
#tab-ferias .table-wrapper,
#tab-ferias .table-wrapper.no-shadow,
#tab-abonos .table-wrapper,
#tab-abonos .table-wrapper.no-shadow,
#tab-recrutamento .table-wrapper,
#tab-recrutamento .table-wrapper.no-shadow,
#tab-formacao .table-wrapper,
#tab-formacao .table-wrapper.no-shadow,
#tab-comunicados .table-wrapper,
#tab-comunicados .table-wrapper.no-shadow,
#tab-documentos .table-wrapper,
#tab-documentos .table-wrapper.no-shadow,
#tab-utilizadores .table-wrapper,
#tab-utilizadores .table-wrapper.no-shadow,
#tab-estrutura .table-wrapper,
#tab-estrutura .table-wrapper.no-shadow{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  overflow-x: auto !important;     /* ✅ scroll lateral aqui */
  overflow-y: visible !important;  /* ✅ sem scroll vertical interno */
  -webkit-overflow-scrolling: touch;
}

/* 2) a tabela NÃO pode “espremer” para caber — cria overflow */
#tab-colaboradores .table-wrapper table,
#tab-ferias .table-wrapper table,
#tab-abonos .table-wrapper table,
#tab-recrutamento .table-wrapper table,
#tab-formacao .table-wrapper table,
#tab-comunicados .table-wrapper table,
#tab-documentos .table-wrapper table,
#tab-utilizadores .table-wrapper table,
#tab-estrutura .table-wrapper table{
  width: max-content !important;   /* ✅ cresce pelo conteúdo */
  min-width: 100% !important;      /* ✅ se couber, ocupa o card */
  table-layout: auto !important;
  border-collapse: collapse;
}

/* 3) evita quebras que “desconfiguram” e ajuda a acionar overflow */
#tab-colaboradores th, #tab-colaboradores td,
#tab-ferias th,        #tab-ferias td,
#tab-abonos th,        #tab-abonos td,
#tab-recrutamento th,  #tab-recrutamento td,
#tab-formacao th,      #tab-formacao td,
#tab-comunicados th,   #tab-comunicados td,
#tab-documentos th,    #tab-documentos td,
#tab-utilizadores th,  #tab-utilizadores td,
#tab-estrutura th,     #tab-estrutura td{
  white-space: nowrap !important;
}

/* 4) opcional: mínimos (ajuda MUITO a garantir overflow em ecrãs pequenos) */
#tab-colaboradores th, #tab-colaboradores td,
#tab-ferias th,        #tab-ferias td,
#tab-abonos th,        #tab-abonos td,
#tab-recrutamento th,  #tab-recrutamento td,
#tab-formacao th,      #tab-formacao td,
#tab-comunicados th,   #tab-comunicados td,
#tab-documentos th,    #tab-documentos td,
#tab-utilizadores th,  #tab-utilizadores td{
  min-width: 90px;
}

/* nomes normalmente precisam de mais espaço */
#tab-colaboradores th:nth-child(2),
#tab-colaboradores td:nth-child(2){
  min-width: 160px;
}
/* CARD da grelha: não pode cortar o conteúdo */
#card-escala-grelha{
  overflow: visible; /* se estiver hidden em algum lado, isto resolve */
}

/* wrapper: é aqui que nasce o scroll */
#card-escala-grelha .table-wrapper.no-shadow{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;               /* scroll horizontal */
  overflow-y: hidden;             /* evita barra vertical esquisita */
  -webkit-overflow-scrolling: touch;
}

/* tabela: tem de poder "crescer" para forçar o scroll */
#card-escala-grelha .table-wrapper.no-shadow > table{
  width: max-content;             /* cresce conforme colunas */
  min-width: 100%;                /* mas nunca menor que o wrapper */
  border-collapse: separate;
  border-spacing: 0;
}

/* para não "quebrar" pills/textos e desformatar */
#card-escala-grelha th,
#card-escala-grelha td{
  white-space: nowrap;
  vertical-align: middle;
}
/* 1) garantir que o card não corta */
#card-escala-grelha.card{
  overflow: visible !important;
}

/* 2) O SCROLL tem de nascer AQUI */
#card-escala-grelha .table-wrapper.no-shadow{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;   /* <- isto é o essencial */
  overflow-y: hidden !important;

  -webkit-overflow-scrolling: touch;
}

/* 3) A tabela tem de poder ficar maior que o wrapper (para ativar scroll) */
#card-escala-grelha .table-wrapper.no-shadow > table{
  width: max-content !important;
  min-width: 100% !important;
}

/* 4) Evitar que o texto/pills quebrem e deformem colunas */
#card-escala-grelha th,
#card-escala-grelha td{
  white-space: nowrap !important;
}
section.tab-panel.active,
main.content,
div.main{
  overflow: visible !important;
}
@media (max-width: 768px) {
  #btn-export-ferias,
  #btn-export-ausencias {
    font-size: 11px !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    min-height: auto !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  #btn-export-formacao {
    font-size: 11px !important;
    padding: 6px 10px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}
/* bloco da direita */
.user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: nowrap;
}

.user-chip > * {
  flex: 0 0 auto;
}

/* ordem fixa dentro do bloco direito */
.user-chip .lang-dropdown-wrap {
  order: 1;
}

.user-chip .avatar {
  order: 2;
}

.user-chip .user-info {
  order: 3;
}

/* idioma */
.lang-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lang-switch {
  height: 34px;
  min-width: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color: #e2e8f0;
  box-shadow: none;
  white-space: nowrap;
}

.lang-switch:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.lang-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

.lang-flag {
  font-size: 14px;
  line-height: 1;
}

/* dropdown */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  padding: 6px;
  display: none;
  z-index: 9999;
}

.lang-dropdown.show {
  display: block;
}

/* mobile */
@media (max-width: 768px) {
  .user-chip {
    gap: 8px;
    flex-wrap: nowrap;
  }

  .user-chip .lang-dropdown-wrap {
    order: 1 !important;
  }

  .user-chip .avatar {
    order: 2 !important;
  }

  .user-chip .user-info {
    order: 3 !important;
  }

  .lang-switch {
    height: 32px;
    min-width: 40px;
    padding: 0 10px;
  }

  .avatar {
    width: 34px;
    height: 34px;
  }

  .lang-flag {
    font-size: 13px;
  }

  .lang-dropdown {
    right: 0;
    min-width: 155px;
  }

  .user-info {
    display: none;
  }
}
.lang-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
}

.lang-switch {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s ease;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

.lang-switch:hover {
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

.lang-switch:active {
  transform: translateY(0);
}

.lang-flag {
  font-size: 16px;
  line-height: 1;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 50%;
  transform: translateX(50%);
  min-width: 150px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  z-index: 9999;
  display: none;
}

.lang-dropdown-wrap.open .lang-dropdown {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #e5e7eb;
  font-size: 13px;
  font-weight: 600;
  transition: .2s ease;
  white-space: nowrap;
}

.lang-option:hover {
  background: rgba(16,185,129,.14);
  color: #ffffff;
}

.lang-option-flag {
  font-size: 15px;
  line-height: 1;
}
/* =========================================
   LAYOUT FIXO
   - sidebar fixa
   - topbar fixa
   - scroll em main.content
   - scroll também na sidebar
   - logo fixo no topo da sidebar
   ========================================= */

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden !important;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
}

/* SIDEBAR fixa + com scroll */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* LOGO FIXO NO TOPO DA SIDEBAR
   sem mexer no tamanho da imagem */
.sidebar-logo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: inherit;
}

/* MAIN fixa */
.main {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* TOPBAR fixa */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  flex: 0 0 56px;
}

/* ÚNICA área principal com scroll */
main.content,
.content,
.main-content {
  flex: 1 1 auto;
  min-height: 0;
  height: calc(100vh - 56px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 26px 16px;
  box-sizing: border-box;
}

/* evita overflow extra */
.page-header,
.tab-panel,
.card,
.table-wrapper {
  max-width: 100%;
  box-sizing: border-box;
}

/* mobile / tablet */
@media (max-width: 900px) {
  .app-shell {
    display: block;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  main.content,
  .content,
  .main-content {
    height: calc(100vh - 56px);
    padding: 16px 12px 12px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 260px;
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 40;
  }

  /* logo continua fixo também no mobile */
  .sidebar-logo {
    position: sticky;
    top: 0;
    z-index: 30;
    background: inherit;
  }
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-option-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.lang-flag-img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.lang-current-flag-img,
.lang-flag-img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-option-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
/* wrapper do botão */
.actions.actions-header {
  position: relative !important;
  overflow: visible !important;
}

/* menu do histórico abre do outro lado */
#menu-colab.actions-menu {
  left: calc(100% + 8px) !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: 99999 !important;
}
/* =========================================================
   PWA FULL WIDTH FIX — ocupa a largura toda no mobile/PWA
   COLAR NO FIM do hr.css
   ========================================================= */

:root{
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-bottomnav-gap: 20px;
  --pwa-bottomnav-h: 76px;
  --pwa-page-pad: 0px;      /* ecrã cheio */
  --pwa-content-pad: 12px;  /* respiro interno dos cards */
}

html.is-pwa,
body.is-pwa{
  height: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
}

@media (max-width: 900px){

  html.is-pwa,
  body.is-pwa{
    overflow-y: auto !important;
  }

  html.is-pwa .app-shell,
  body.is-pwa .app-shell{
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* ✅ main sem margens laterais */
  html.is-pwa .main,
  body.is-pwa .main{
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;

    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* ✅ topbar de ponta a ponta */
  html.is-pwa .topbar,
  body.is-pwa .topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;

    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: var(--pwa-content-pad) !important;
    padding-right: var(--pwa-content-pad) !important;

    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* ✅ content ocupa tudo, só com padding interno controlado */
  html.is-pwa main.content,
  html.is-pwa .content,
  body.is-pwa main.content,
  body.is-pwa .content{
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;

    margin: 0 !important;
    padding-top: 8px !important;
    padding-left: var(--pwa-content-pad) !important;
    padding-right: var(--pwa-content-pad) !important;

    padding-bottom: calc(
      var(--pwa-bottomnav-h) +
      var(--pwa-bottomnav-gap) +
      26px +
      var(--pwa-safe-bottom)
    ) !important;

    box-sizing: border-box !important;
  }

  /* painel */
  html.is-pwa body[data-hr-active-tab="painel"] #tab-painel,
  body.is-pwa[data-hr-active-tab="painel"] #tab-painel{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  html.is-pwa body[data-hr-active-tab="painel"] #tab-painel .kpi-grid,
  body.is-pwa[data-hr-active-tab="painel"] #tab-painel .kpi-grid{
    margin-top: 6px !important;
  }

  html.is-pwa body[data-hr-active-tab="painel"] #tab-painel .hr-apps,
  body.is-pwa[data-hr-active-tab="painel"] #tab-painel .hr-apps{
    margin-top: 16px !important;
    margin-bottom: calc(var(--pwa-bottomnav-gap) + 10px) !important;
  }

  /* ✅ bottom nav continua com respiro lateral */
  html.is-pwa .hr-bottomnav,
  body.is-pwa .hr-bottomnav{
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(10px + var(--pwa-safe-bottom)) !important;
  }

  html.is-pwa body[data-hr-sidebar-open="1"] .hr-bottomnav,
  body.is-pwa[data-hr-sidebar-open="1"] .hr-bottomnav{
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 520px){
  :root{
    --pwa-content-pad: 12px;
  }

  html.is-pwa .topbar,
  body.is-pwa .topbar{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html.is-pwa main.content,
  html.is-pwa .content,
  body.is-pwa main.content,
  body.is-pwa .content{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
  }
}