*,
*::before,
*::after {
  box-sizing: border-box;
  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;
}