@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8fafc; /* Fundo claro */
  color: #1e293b;
}

/* ================= NAVBAR ================= */
.navbar{
  height: 72px;
  position: fixed; top:0; left:0; right:0;
  display:flex; align-items:center;
  padding: 0 16px;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(59,130,246,.15), transparent 60%),
    linear-gradient(90deg, rgba(10, 22, 55, 0.658), rgba(14,40,104,.85));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 10px 30px rgba(2,6,23,.18), 0 2px 8px rgba(2,6,23,.08);
  z-index: 1001;
}

.navbar-brand{
  display:flex; align-items:center; gap:10px;
  font-size: 1.4rem; font-weight: 700; color:#fff;
  letter-spacing:.3px;
  margin-left: 44px; /* respiro para o botão ancorado à esquerda */
}
.navbar-brand img{
  width: 60px; height: 36px; object-fit:contain;
}

/* Nome + avatar */
#user-name{ font-size: 1rem; color:#e2e8f0; margin-right:10px; letter-spacing:.2px; }
#profile-pic{
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 0 6px rgba(37,99,235,.25);
  transition: transform .15s ease, box-shadow .25s ease;
}
#profile-pic:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 0 10px rgba(37,99,235,.30);
}

.navbar .dropdown-menu{
  border-radius: 12px; border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 18px 40px rgba(2,6,23,.24);
  overflow:hidden;
}
.navbar .dropdown-item{
  padding: 10px 14px; font-size:.95rem; color:#0f172a;
  transition: background .18s ease, padding-left .18s ease;
}
.navbar .dropdown-item:hover{
  background: #e6eefc; padding-left: 18px;
}

/* ================= SIDEBAR ================= */
.sidebar{
  width: 210px; /* largura padrão (desktop) */
  height: calc(100vh - 72px);
  position: fixed; top:72px; left:0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.534), rgba(14,36,77,.78)) padding-box,
    linear-gradient(180deg, rgba(148,163,184,.35), rgba(59,130,246,.22)) border-box;
  border-right: 1px solid rgba(148,163,184,.25);
  color:#e2e8f0;
  overflow-y:auto; overscroll-behavior: contain;
  transition: width .25s ease, transform .25s ease;
  box-shadow: 2px 0 24px rgba(2,6,23,.20);
  z-index: 1100; /* acima do calendário no mobile */
}
.sidebar.collapsed{ width: 64px; }

.sidebar a{
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  text-decoration:none;
  color:#cbd5e1;
  border-left: 3px solid transparent;
  transition: background .18s ease, color .18s ease, transform .12s ease, border-color .18s ease;
  position: relative;
}
.sidebar a .bi{ font-size: 1.25rem; flex: none; transition: transform .18s ease; }
.sidebar a .sidebar-text{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

.sidebar a:hover{
  background: linear-gradient(90deg, rgba(29,78,216,.18), rgba(29,78,216,.06));
  color:#fff;
  border-left-color:#3b82f6;
  transform: translateX(2px);
}
.sidebar a:hover .bi{ transform: scale(1.06); }

.sidebar a.active{
  background: linear-gradient(90deg, rgba(59,130,246,.22), rgba(29,78,216,.10));
  color:#fff;
  border-left-color:#60a5fa;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.sidebar.collapsed .sidebar-text{ display:none; }

/* Scrollbar discreta */
.sidebar{ scrollbar-width: thin; scrollbar-color:#3b82f6 transparent; }
.sidebar::-webkit-scrollbar{ width: 8px; }
.sidebar::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #3b82f6, #1e40af);
  border-radius: 6px;
}

/* Mobile: sidebar vira overlay reduzida */
@media (max-width: 992px){
  .content{ margin-left: 0 !important; }

  .sidebar{
    width: 220px;                 /* reduzida no mobile */
    transform: translateX(-100%); /* oculta fora da tela */
  }
  .sidebar.is-open{
    transform: translateX(0);     /* aparece por cima */
  }

  /* Backdrop do overlay (fica abaixo da navbar) */
  .sidebar-backdrop{
    position: fixed; inset: 72px 0 0 0;
    background: rgba(2,6,23,.48);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1090;
  }
  .sidebar-backdrop.is-visible{
    opacity: 1; pointer-events: auto;
  }
}

/* ================= CONTEÚDO ================= */
.content{
  margin-top: 72px;
  margin-left: 210px;                 /* acompanha a sidebar cheia */
  transition: margin-left .25s ease;
  padding: 0;
  min-height: calc(100vh - 72px);
  height: auto;
}
.sidebar.collapsed ~ .content{ margin-left: 64px; }
@media (max-width: 992px){
  .content{ margin-left: 0 !important; }
}

/* ================= BOTÃO DA SIDEBAR (ancorado à esquerda da navbar) ================= */
.navbar .sidebar-toggle{
  all: unset;
  position: absolute;           /* gruda no canto da navbar */
  left: 15px;                    /* mais à esquerda ainda */
  top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items:center; justify-content:center;
  width: 28px; height: 28px;    /* um pouco menor */
  cursor: pointer;
  border-radius: 8px;
  background: rgba(255,255,255,.10);
  color:#e2e8f0;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  margin: 0;                    /* sem margem, posição absoluta manda */
  z-index: 1002;                /* acima do conteúdo da navbar */
}
.navbar .sidebar-toggle:hover{
  background: rgba(255,255,255,.18);
  box-shadow: 0 8px 24px rgba(2,6,23,.25);
  transform: translateY(-50%) scale(1.02);
}
.navbar .sidebar-toggle .hamburger,
.navbar .sidebar-toggle .hamburger::before,
.navbar .sidebar-toggle .hamburger::after{
  content: "";
  display: block;
  width: 14px; height: 2px;     /* proporcional ao botão menor */
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.navbar .sidebar-toggle .hamburger{ position: relative; }
.navbar .sidebar-toggle .hamburger::before{ position: absolute; top: -5px; left: 0; }
.navbar .sidebar-toggle .hamburger::after{ position: absolute; top: 5px; left: 0; }
.navbar .sidebar-toggle.is-open .hamburger{ transform: rotate(45deg); }
.navbar .sidebar-toggle.is-open .hamburger::before{ transform: translateY(5px) rotate(90deg); }
.navbar .sidebar-toggle.is-open .hamburger::after{ transform: translateY(-5px) rotate(90deg); width: 14px; }

/* ================= Botão “Selecionar Usuário” com o mesmo visual ================= */
#event-user-button,
#edit-event-user-button{
  all: unset;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff; font-weight: 700; letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37,99,235,.32);
  transition: transform .12s ease, box-shadow .2s ease;
}
#event-user-button:hover,
#edit-event-user-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30,64,175,.35);
}

/* === CALENDÁRIO FULL-BLEED (sem margens/bordas) === */
#calendar{
  width: 100%;
  height: 100%;     /* ok porque a .content tem height:auto */
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Inter', sans-serif;
}

/* === FULLCALENDAR — VISUAL MODERNO (somente estilo) ===================== */

/* Paleta base (pode ajustar as cores se quiser) */
:root{
  --fc-accent: #3b82f6;            /* azul moderno */
  --fc-accent-2: #1e40af;
  --fc-ink: #0f172a;               /* texto primário */
  --fc-ink-2: #334155;             /* texto secundário */
  --fc-surface: #ffffff;           /* superfícies */
  --fc-surface-2: #f8fafc;         /* barras/cabeçalho */
  --fc-border: #e5e7eb;            /* linhas sutis */
  --fc-glow: 0 8px 16px rgba(59,130,246,.20);
}

/* Toolbar com “glass” */
.fc .fc-toolbar{
  padding: 10px 14px;
  background:
    radial-gradient(900px 500px at 20% -30%, rgba(59,130,246,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.85));
  border: 1px solid rgba(148,163,184,.25);
  border-left: 0; border-right: 0;
  backdrop-filter: blur(6px);
}
.fc .fc-toolbar-title{
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--fc-ink), var(--fc-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Botões com microinteração e leve glass */
.fc .fc-button{
  background: linear-gradient(180deg, rgba(241,245,249,.9), rgba(226,232,240,.9));
  color: var(--fc-ink-2);
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease;
}
.fc .fc-button:hover{
  background: linear-gradient(180deg, #e8eef6, #dfe7f2);
  transform: translateY(-1px);
  box-shadow: var(--fc-glow);
}
.fc .fc-button-primary{
  background: linear-gradient(135deg, var(--fc-accent), var(--fc-accent-2));
  color: #fff; border-color: transparent;
}
.fc .fc-button-primary:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px rgba(30,64,175,.35);
}

/* Cabeçalho dos dias mais “chipado” */
.fc .fc-col-header-cell{
  background: var(--fc-surface-2);
  border-bottom: 1px solid var(--fc-border);
}
.fc .fc-col-header-cell-cushion{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 8px; padding: 6px 10px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 999px;
}

/* Dia atual com anel sutil */
.fc .fc-day-today{
  background: linear-gradient(180deg, #f0f7ff, #eef6ff);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.25);
}

/* Hover no dia com “halo” */
.fc .fc-daygrid-day{
  transition: background .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.fc .fc-daygrid-day:hover{
  background: #f3f6fb;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.18);
}

/* Número do dia em “pill” quando hover/hoje */
.fc .fc-daygrid-day-number{
  border-radius: 8px; padding: 4px 6px;
  transition: background .18s ease, color .18s ease;
}
.fc .fc-daygrid-day:hover .fc-daygrid-day-number{
  background: rgba(59,130,246,.08);
  color: var(--fc-ink);
}

/* Eventos — pílula com barra de acento e brilho leve */
.fc .fc-event{
  position: relative;
  background: linear-gradient(180deg, #e2e8f0, #cbd5e1);
  color: #0b1220;
  border: 0;
  border-radius: 10px;
  padding: 3px 8px 3px 12px;
  box-shadow: 0 1px 3px rgba(2,6,23,.08);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
}
.fc .fc-event::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-top-left-radius:10px; border-bottom-left-radius:10px;
  background: linear-gradient(180deg, var(--fc-accent), var(--fc-accent-2));
}
.fc .fc-event:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.16);
  filter: saturate(1.05);
}

/* Densidade de texto do evento mais legível */
.fc .fc-event-title, .fc .fc-event-time{
  font-weight: 700; letter-spacing:.2px;
}

/* Badge para eventos all-day */
.fc .fc-daygrid-event-harness .fc-event{
  padding-left: 14px;
}
.fc .fc-daygrid-event-harness .fc-event::after{
  content: attr(data-badge);
  display: inline-block; margin-left: 6px; padding: 2px 6px;
  font-size: .72rem; font-weight: 700; letter-spacing:.02em;
  color: #0f172a; background: rgba(255,255,255,.7);
  border: 1px solid rgba(148,163,184,.45);
  border-radius: 999px;
}

/* Popover (eventos “+x mais”) com glass */
.fc .fc-more-popover{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 18px 40px rgba(2,6,23,.24);
  border-radius: 14px;
}
.fc .fc-popover-header{
  background: transparent; border-bottom: 1px solid rgba(148,163,184,.35);
  font-weight: 800; color: var(--fc-ink);
}

/* Scrollbar do grid e popovers (sutil) */
.fc .fc-scroller, .fc .fc-popover-body{
  scrollbar-width: thin; scrollbar-color: var(--fc-accent) transparent;
}
.fc .fc-scroller::-webkit-scrollbar,
.fc .fc-popover-body::-webkit-scrollbar{ width: 8px; }
.fc .fc-scroller::-webkit-scrollbar-thumb,
.fc .fc-popover-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--fc-accent), var(--fc-accent-2));
  border-radius: 6px;
}

/* “Estado ativo” da célula (quando seleciona datas) */
.fc .fc-highlight{
  background: rgba(59,130,246,.12);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.35);
}

/* FullCalendar LIST (modo mobile) – visual clean/tech */
.fc .fc-list{ border: none; }
.fc .fc-list-day-cushion{
  background: #f8fafc; color: #0f172a; font-weight: 800; letter-spacing: .02em;
  border: 1px solid #e5e7eb; border-left: 0; border-right: 0;
}
.fc .fc-list-table td{ border-color: #eef2f7; }
.fc .fc-list-event-graphic{ position: relative; margin-right: 8px; }
.fc .fc-list-event-graphic .fc-list-event-dot{
  border: 0; width: 10px; height: 10px;
  background: linear-gradient(180deg, #3b82f6, #1e40af);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.fc .fc-list-event-title{ font-weight: 700; color: #0f172a; }
.fc .fc-list-event-time{ font-weight: 600; color: #334155; }
.fc .fc-list-event:hover td{ background: #f3f6fb; }

@media (max-width: 768px){
  .fc .fc-button{ padding: 6px 10px; font-size: .9rem; }
  .fc .fc-toolbar{ padding: 8px 10px; }
}

/* FullCalendar Month: garanta layout fixo/7 colunas também no mobile */
.fc .fc-daygrid,
.fc .fc-daygrid table{
  table-layout: fixed;      /* 7 colunas iguais */
  width: 100%;
}
.fc .fc-scrollgrid{
  overflow: visible;        /* evita corte lateral por overflow */
}

/* Evita qualquer min-height agressivo que tenha sobrado */
.fc .fc-daygrid-day{ min-height: auto; }


/* ➕ NOVO ESTILO DE MODAIS — 2025 */

:root{
  --modal-bg: rgba(248, 250, 252, 0.85);
  --modal-border: rgba(148, 163, 184, 0.25);
  --modal-shadow: 0 10px 30px rgba(2, 6, 23, .18), 0 2px 8px rgba(2, 6, 23, .08);
  --modal-radius: 16px;
  --modal-padding: clamp(16px, 2vw, 28px);
  --modal-maxw: 560px;              /* largura padrão */
  --modal-maxh: min(85vh, 760px);   /* altura máxima aproveitando viewport */
}

.modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(59,130,246,.10), transparent 60%),
    rgba(15, 23, 42, 0.66);
  backdrop-filter: blur(6px);
}

.modal-content{
  position: relative;
  margin: clamp(32px, 6vh, 60px) auto;
  width: min(92%, var(--modal-maxw));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--modal-padding);
  border-radius: var(--modal-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.85)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(148,163,184,.35)) border-box;
  border: 1px solid var(--modal-border);
  box-shadow: var(--modal-shadow);
  animation: modal-pop .22s ease-out;
  max-height: var(--modal-maxh);
  overflow: auto;                 /* habilita a rolagem */
  overscroll-behavior: contain;   /* impede arrastar o body */

  /* Scrollbar estilizada (todas as modais) */
  scrollbar-width: thin;                      /* Firefox */
  scrollbar-color: #3b82f6 transparent;
}
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6, #1e40af);
  border-radius: 6px;
}
.modal-content:hover{
  box-shadow: inset 0 0 8px rgba(37, 99, 235, 0.16);
}

/* animação moderna */
@keyframes modal-pop{
  from{ transform: translateY(12px) scale(.98); opacity: 0; }
  to{   transform: translateY(0)    scale(1);   opacity: 1; }
}

/* header/body/footer */
.modal-header{
  position: sticky; top:0; z-index: 1;
  display:flex; align-items:center; gap:12px;
  padding-bottom: 8px; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(249,250,251,.9), rgba(249,250,251,.5));
  backdrop-filter: blur(2px);
  border-bottom: 1px solid rgba(148,163,184,.25);
}

.modal-title{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 700; color:#0f172a; letter-spacing:.2px;
}

.modal-body{
  overflow:auto;
  padding-right: 2px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;

  /* Scrollbar da área de conteúdo (reforço) */
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 transparent;
}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b82f6, #1e40af);
  border-radius: 6px;
}

.modal-footer{
  position: sticky; bottom:0; z-index: 1;
  display:flex; gap: 10px; justify-content:flex-end;
  padding-top: 10px; margin-top: 6px;
  background: linear-gradient(0deg, rgba(249,250,251,.9), rgba(249,250,251,.5));
  border-top: 1px solid rgba(148,163,184,.25);
}

/* títulos antigos (sem .modal-header) */
.modal-content h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: #1e293b;
  font-weight: 600;
}

/* inputs e textarea */
.modal-content label{ font-size:.9rem; color:#334155; font-weight:600; }
.modal-content input,
.modal-content select,
.modal-content textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 0.95rem;
  margin: 4px 0 8px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform .05s;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  outline: none;
}
.modal-content textarea { background-color: #f9fafb; }

/* botões */
.btn,
.modal-content .btn,
.modal-content button[type="submit"]{
  border: 0; cursor: pointer; user-select: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .06s ease, box-shadow .2s ease, background .25s ease;
}
.btn-primary,
.modal-content .btn-primary,
.modal-content button[type="submit"]{
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,99,235,.32);
  width: auto; /* submit não força 100% */
}
.modal-content button[type="submit"]{ width: auto; }
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37,99,235,.4);
}
.btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(37,99,235,.28);
}

/* botão ghost */
.btn-ghost{
  background: linear-gradient(180deg, rgba(241,245,249,.7), rgba(226,232,240,.7));
  color:#0f172a;
}
.btn-ghost:hover{
  background: linear-gradient(180deg, rgba(241,245,249,.95), rgba(226,232,240,.95));
}

/* botão fechar */
.modal-content .btn-close,
.modal-content .close {
  background-color: transparent;
  color: #475569;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 20px;
  transition: color 0.3s ease;
}
.modal-content .btn-close:hover,
.modal-content .close:hover { color: #1e293b; }

/* grid interno */
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

/* variantes de tamanho */
.modal--sm .modal-content{ --modal-maxw: 440px; }
.modal--md .modal-content{ --modal-maxw: 560px; }
.modal--lg .modal-content{ --modal-maxw: 720px; }
.modal--xl .modal-content{ --modal-maxw: 860px; }

/* responsivo */
@media (max-width: 768px) {
  .modal-body{ grid-template-columns: 1fr; }
  .modal--sheet .modal-content{
    margin: auto;
    margin-top: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    max-height: 88vh;
    animation: sheet-up .22s ease-out;
  }
  @keyframes sheet-up{
    from{ transform: translateY(14px); opacity:0;}
    to{ transform: translateY(0); opacity:1;}
  }
}

/* manter o body rolável quando a modal abre */
body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

/* Hover específico para a modal de detalhes (id atual no seu HTML) */
#event-modal .modal-content {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
#event-modal .modal-content:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.12);
  border-color: #3b82f6;
}

/* ⬆️ Largura da modal de seleção de usuários (mais larga) */
#user-selection-modal .modal-content{
  --modal-maxw: 680px;   /* antes: 480px */
  max-width: var(--modal-maxw);
}

/* botão remover usuário */
.user-remove-button {
  background-color: #dc2626 !important;
  color: white !important;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.25s ease, transform .06s ease;
}
.user-remove-button:hover {
  background-color: #b91c1c !important;
  transform: translateY(-1px);
}

/* === LISTA DE USUÁRIOS — sempre 2 colunas (desktop/tablet) e 1 no mobile === */
.user-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr)); /* 2 colunas fixas */
  gap: 12px;
  max-height: 60vh;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #f9fafb;
}

/* Mobile: 1 coluna */
@media (max-width: 640px){
  .user-list{ grid-template-columns: 1fr; }
}

.user-list::-webkit-scrollbar { width: 8px; }
.user-list::-webkit-scrollbar-thumb {
  background-color: #3b82f6;
  border-radius: 4px;
}

/* Cartões dos usuários — tamanho consistente e nome não quebra */
.user-item{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 12px;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  cursor: pointer;
  min-height: 58px; /* dá “corpo” ao card */
}
.user-item img{
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
}
.user-item .name{
  flex: 1; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* nomes longos não quebram o layout */
}

/* Estado hover/selecionado (mantidos) */
.user-item:hover{
  transform: translateY(-1px);
  border-color:#93c5fd;
  box-shadow: 0 6px 16px rgba(2,6,23,.08);
}
.user-item.is-selected{
  border-color:#2563eb;
  box-shadow: 0 0 0 3px rgba(59,130,246,.20);
  background:#ffffff;
}

/* Scrollbar */
.user-list::-webkit-scrollbar { width: 8px; }
.user-list::-webkit-scrollbar-thumb { background-color: #3b82f6; border-radius: 4px; }

/* avatar sempre no tamanho certo */
.user-item img{
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}

/* nome quebra em múltiplas linhas sem estourar */
.user-item span{
  flex: 1;
  font-weight: 600; color: #0f172a;
  white-space: normal;                /* permite quebrar */
  word-break: break-word;             /* nomes muito grandes */
  line-height: 1.2;
}

/* se ainda existir algum botão antigo dentro do item, esconda */
.user-item button{ display: none !important; }

/* utilitários (mantidos) */
.btn { padding: 8px 12px; font-size: 0.9rem; border-radius: 6px; cursor: pointer; }
.btn-danger { background-color: #f44336; color: #fff; }
.btn-danger:hover { background-color: #d32f2f; }

/* (mantido para compatibilidade, caso algo ainda use) */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* chips dos usuários selecionados (criar/editar) */
#selected-users, #edit-selected-users{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.selected-user-chip{
  display: inline-flex; align-items: center; gap: 8px;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
}
.selected-user-chip img{
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.selected-user-chip .label{
  font-size: .92rem; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selected-user-chip .remove{
  background: #ef4444; color: #fff; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.selected-user-chip .remove:hover{ background: #dc2626; }

/* fallback extra: qualquer <img> perdido nessas áreas */
#selected-users img, #edit-selected-users img{
  max-width: 32px; max-height: 32px; border-radius: 50%; object-fit: cover;
}

/* mais colunas em telas grandes */
@media (min-width: 992px){
  .user-list{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

/* Hover Moderno */
.sidebar a:hover .bi {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.card {
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1e293b;
}

.card-text {
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 10px;
}

.card .btn-primary {
  background-color: #3b82f6;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.card .btn-primary:hover {
  background-color: #2563eb;
  transform: scale(1.05);
}

#events-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
  .search-bar input {
    width: 100%;
  }
  .card {
    margin-bottom: 15px;
  }
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  color: #2563eb; /* Azul para combinar com a navbar */
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.page-title i {
  color: #3b82f6;
  font-size: 2.5rem;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.search-bar input {
  max-width: 500px;
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
}

.search-bar input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0px 4px 8px rgba(59, 130, 246, 0.2);
}

.kanban-board {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.kanban-column {
  flex: 1;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kanban-column-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.kanban-tasks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-task {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

.kanban-task:hover {
  background-color: #f1f3f5;
}

/* =========================
   LOGIN — VISUAL TECH LIMPO
   ========================= */

/* Paleta da tela de login */
:root{
  --login-bg-a: #0b1220;
  --login-bg-b: #0f1b3b;
  --login-ink: #e5ecff;
  --login-muted: #cbd5e1;
  --login-accent: #3b82f6;
  --login-accent-2: #1e40af;
  --login-card-bd: rgba(148,163,184,.22);
  --login-glass-1: rgba(255,255,255,.06);
  --login-glass-2: rgba(255,255,255,.12);
  --login-glow: 0 18px 44px rgba(59,130,246,.25), 0 6px 18px rgba(2,6,23,.25);
}

/* Fundo e tipografia */
body.login-page{
  min-height: 100vh;
  margin: 0;
  color: var(--login-ink);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, var(--login-bg-a), var(--login-bg-b));
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
}

/* Partículas + glow (cobrem toda a tela) */
#login-particles{ position: fixed; inset: 0; z-index: 0; }
.login-glow{
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(600px 260px at 75% 20%, rgba(99,102,241,.14), transparent 70%),
    radial-gradient(460px 240px at 20% 85%, rgba(59,130,246,.16), transparent 70%);
}

/* Branding topo */
.login-nav{
  position: fixed; top: 16px; left: 16px; right: 16px;
  display: flex; justify-content: flex-start; z-index: 2;
}
.brand-chip{
  all: unset;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--login-glass-1);
  border: 1px solid var(--login-glass-2);
  color: #e2e8f0; font-weight: 800; letter-spacing: .2px;
  backdrop-filter: blur(6px); cursor: default;
  box-shadow: 0 8px 24px rgba(2,6,23,.22);
}
.brand-chip img{ width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }

.brand-chip .brand-logo-hmpc {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
}

/* Centro */
.login-wrap{
  position: relative; z-index: 2;
  min-height: 100vh; display: grid; place-items: center;
  padding: clamp(16px, 4vw, 32px);
}

/* Card */
.login-card{
  width: 100%; max-width: 420px; margin: 0 auto; position: relative;
  border-radius: 18px;
  padding: clamp(18px, 3.2vw, 26px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.09));
  border: 1px solid var(--login-card-bd);
  box-shadow: var(--login-glow);
  backdrop-filter: blur(10px);
  transform: translateY(6px);
  animation: login-card-in .35s ease-out forwards;
  overflow: hidden;
}
@keyframes login-card-in{ from{ transform: translateY(12px); opacity: 0; } to{ transform: translateY(0); opacity: 1; } }
.login-card::before{
  content:""; position:absolute; inset:0; border-radius:18px; z-index:-1; padding:1px;
  background: conic-gradient(from var(--angle, 0deg), #60a5fa, #1e40af, #60a5fa);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: login-border-spin 6s linear infinite;
}
@keyframes login-border-spin{ to{ --angle: 360deg; } }
.login-card:hover{ transform: translateY(0); box-shadow: 0 22px 60px rgba(30,64,175,.28); }

/* Cabeçalho do card */
.login-card__header{ text-align: center; margin-bottom: 10px; }
.login-card__header h1{
  margin: 4px 0; font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  background: linear-gradient(90deg, #fff, #c7d2fe);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .3px; text-shadow: 0 0 20px rgba(99,102,241,.15);
}
.login-card__header p{ margin: 0; color: var(--login-muted); }

/* --------- Inputs (compactos e BEM específicos) --------- */
.login-card .login-form{ display: grid; gap: 10px; margin-top: 8px; }

/* neutraliza interferências e padroniza box-sizing */
.login-card .login-form input{
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* tamanho/estética finais */
.login-card .login-form input{
  width: 100% !important;
  height: 44px !important;                 /* altura confortável */
  padding: 10px 14px !important;           /* padding equilibrado */
  line-height: 24px !important;
  font-size: .95rem !important;
  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(255,255,255,.96), rgba(248,250,252,.94)) !important;
  color: #0b1220 !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: border-color .2s ease, box-shadow .25s ease, transform .05s ease !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 1px 8px rgba(2,6,23,.06);
}
.login-card .login-form input::placeholder{ color:#7c8aa0; font-weight:500; }
.login-card .login-form input:hover{ border-color:#b6c8e1 !important; }
.login-card .login-form input:focus{
  border-color:#93c5fd !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important, 0 8px 22px rgba(30,64,175,.12) !important;
}

/* Inputs login */
.login-card input[type="email"] {
  padding-left: 14px !important;   /* antes 42px */
  background-position: 8px 50% !important; /* ícone mais à esquerda */
}

.login-card input[type="password"] {
  padding-left: 14px !important;   /* antes 42px */
  padding-right: 42px !important;
  background-position: 8px 50% !important;
}

/* Campo senha com “olho” */
.login-card .pass-wrap{ position: relative; }
.login-card .pass-toggle{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color:#64748b; cursor:pointer; font-size: 1.05rem;
  transition: color .2s ease, transform .1s ease;
}
.login-card .pass-toggle:hover{ color:#334155; transform: translateY(-50%) scale(1.05); }

/* Botão Entrar */
#login-button{
  width: 100%; height: 42px;
  border: 0; cursor: pointer; user-select: none;
  border-radius: 12px; padding: 0 14px;
  font-weight: 800; letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; background: linear-gradient(135deg, var(--login-accent), var(--login-accent-2));
  box-shadow: 0 14px 34px rgba(30,64,175,.35);
  transition: transform .12s ease, box-shadow .2s ease, filter .18s ease;
}
#login-button:hover{ transform: translateY(-1px); filter: saturate(1.04); }
#login-button:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(30,64,175,.30); }

/* Erro + spinner (funcionais) */
.spinner-border{
  width: 1rem; height: 1rem;
  border: .1em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spinner-border .75s linear infinite; margin-left: 6px; display: none;
}
@keyframes spinner-border { to { transform: rotate(360deg); } }
.error-message{ color:#ef4444; margin-top:10px; display:none; font-weight:600; text-align:center; }
.login-form button.loading{ pointer-events:none; opacity:.85; filter:saturate(.9); }

/* Rodapé */
.login-footer{ margin-top: 10px; text-align: center; color: #9fb2cc; }

/* Esconde logos antigas do DOM */
.logo, .logo2{ display: none !important; }

/* Responsivo */
@media (max-width: 480px){
  .login-card{ max-width: 92vw; }
}