/* ======================================================================
   painel.css — Slideshow no Dashboard Moodle (/my/)
   Regras:
   - Só aplica em body#page-my-index
   - Fullwidth dentro do #page (sem padding lateral)
   - Altura responsiva com máximo de 400px
   - Z-index baixo (não cobre botões/drawers)
   - Status só aparece quando necessário
   - Controles (setas) visíveis
   ====================================================================== */

/* Remove padding lateral REAL do layout no /my/ */
body#page-my-index #page,
body#page-my-index #page-content,
body#page-my-index .container-fluid,
body#page-my-index .row,
body#page-my-index #page .container,
body#page-my-index #page .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Wrapper do slideshow */
body#page-my-index #page .fm-slideshow {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;

  /* MUITO IMPORTANTE: NÃO ficar por cima do UI do Moodle */
  z-index: 0 !important;
}

/* Palco: altura responsiva com máximo 400px */
body#page-my-index #page .fm-slideshow__stage {
  width: 100% !important;

  /* nunca passa de 400px e nunca colapsa */
  height: clamp(220px, 28vw, 400px) !important;
  max-height: 400px !important;

  position: relative !important;
  overflow: hidden !important;

  background-color: #0f172a !important;
}

/* Imagens com crossfade */
body#page-my-index #page .fm-slideshow__img {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  display: block !important;

  opacity: 0 !important;
  transition: opacity 0.8s ease !important;
  will-change: opacity;
}

body#page-my-index #page .fm-slideshow__img.is-active {
  opacity: 1 !important;
}

/* Status: por padrão, escondido. Só aparece quando JS adiciona .is-visible */
body#page-my-index #page .fm-slideshow__status {
  position: absolute !important;
  inset: 0 !important;

  display: none; /* <-- NÃO force com !important */
  place-items: center !important;

  color: #ffffff !important;
  font-weight: 700 !important;
  text-align: center !important;

  padding: 12px 16px !important;

  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.55),
    rgba(15, 23, 42, 0.20)
  ) !important;

  z-index: 2 !important;
  pointer-events: none !important;
}

body#page-my-index #page .fm-slideshow__status.is-visible {
  display: grid !important;
}

/* Controles (setas) */
body#page-my-index #page .fm-slideshow__nav {
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 0 14px !important;
  z-index: 3 !important;

  pointer-events: none !important; /* container não captura clique */
}

body#page-my-index #page .fm-slideshow__btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,0.30) !important;
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(6px);

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  pointer-events: auto !important; /* botão captura clique */
  user-select: none;

  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

body#page-my-index #page .fm-slideshow__btn:hover {
  transform: translateY(-1px);
  background: rgba(15, 23, 42, 0.48) !important;
  border-color: rgba(255,255,255,0.45) !important;
}

body#page-my-index #page .fm-slideshow__btn:active {
  transform: translateY(0);
}

body#page-my-index #page .fm-slideshow__btn svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: rgba(255,255,255,0.95) !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Garantia extra: UI do Moodle acima do slideshow */
body#page-my-index .drawer-toggle,
body#page-my-index .drawer,
body#page-my-index .drawer-right,
body#page-my-index .drawer-left {
  z-index: 2000 !important;
}

/* Ajuste específico do tema para remover padding em telas grandes */
@media (min-width: 768px) {
  body#page-my-index #page.drawers {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   FM-DASHBOARD: ocultar header padrão do Moodle SOMENTE no /my/
   ========================================================= */

/* Oculta o cabeçalho no painel se o botão "Personalizar esta página" (div.singlebutton) não estiver presente. */
body#page-my-index:not(:has(div.singlebutton)) #page-header {
  display: none !important;
}

/* Remove espaço que o header deixa em alguns temas */
body#page-my-index #page-header + .container,
body#page-my-index #page-header + .container-fluid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body#page-my-index aside section.card:first-child {
    border: none !important;
    box-shadow: none !important;
}