/* ==========================================================================
   ERTEL — Shell Layout
   Grid: topbar no topo (full width) + sidebar fixa à esquerda + conteúdo.
   Um único markup serve desktop/tablet/celular — o que muda é como a
   sidebar se comporta (persistente → colapsada → drawer sobreposto).
   ========================================================================== */

.ertel-shell {
  display: grid;
  height: 100vh;
  grid-template-columns: var(--ertel-sidebar-width) 1fr;
  grid-template-rows: var(--ertel-topbar-height) 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  transition: grid-template-columns var(--ertel-transition-base);
}

.ertel-shell[data-sidebar="collapsed"] {
  grid-template-columns: var(--ertel-sidebar-width-collapsed) 1fr;
}

/* -- Modo "Agenda Flutuante" (ver core/app.js) ------------------------------
   Janela de popup dedicada, aberta pelo botão "Abrir Agenda Flutuante" em
   Planejamento -- some com o menu lateral/topbar (a própria Agenda já tem
   cabeçalho e botão de Fechar) pra sobrar o máximo de espaço numa janela
   pequena. */
.ertel-shell[data-modo="flutuante"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "main";
}
.ertel-shell[data-modo="flutuante"] .ertel-topbar,
.ertel-shell[data-modo="flutuante"] .ertel-sidebar,
.ertel-shell[data-modo="flutuante"] .ertel-sidebar-overlay {
  display: none;
}

/* -- Topbar ---------------------------------------------------------------- */

.ertel-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--ertel-space-4);
  padding: 0 var(--ertel-space-5);
  background: var(--ertel-surface);
  border-bottom: 1px solid var(--ertel-border);
  z-index: 20;
}

.ertel-topbar__menu-toggle {
  display: none; /* só aparece em telas estreitas (drawer) */
  background: none;
  border: none;
  padding: var(--ertel-space-2);
  border-radius: var(--ertel-radius-sm);
  color: var(--ertel-ink-soft);
}

/* O botão de colapsar (desktop) é a exceção: fica visível sempre — é o
   celular que aparece o de abrir o drawer (regra abaixo, <900px). */
.ertel-topbar__menu-toggle[data-action="toggle-collapse"] {
  display: flex;
}

.ertel-topbar__menu-toggle:hover {
  background: var(--ertel-surface-alt);
}

.ertel-topbar__title {
  font-size: var(--ertel-text-lg);
  font-weight: var(--ertel-weight-semibold);
}

.ertel-topbar__spacer {
  flex: 1;
}

/* -- Sidebar ----------------------------------------------------------------- */

.ertel-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--ertel-surface);
  border-right: 1px solid var(--ertel-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

.ertel-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  height: var(--ertel-topbar-height);
  padding: 0 var(--ertel-space-5);
  border-bottom: 1px solid var(--ertel-border);
  flex-shrink: 0;
  overflow: hidden;
}

.ertel-sidebar__brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--ertel-radius-sm);
  background: var(--ertel-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ertel-font-mono);
  font-weight: var(--ertel-weight-bold);
  font-size: var(--ertel-text-sm);
  flex-shrink: 0;
}

.ertel-sidebar__brand-name {
  font-weight: var(--ertel-weight-semibold);
  font-size: var(--ertel-text-lg);
  white-space: nowrap;
}

.ertel-shell[data-sidebar="collapsed"] .ertel-sidebar__brand-name,
.ertel-shell[data-sidebar="collapsed"] .ertel-nav-item__index,
.ertel-shell[data-sidebar="collapsed"] .ertel-nav-item__label,
.ertel-shell[data-sidebar="collapsed"] .ertel-nav-item__badge {
  display: none;
}

.ertel-shell[data-sidebar="collapsed"] .ertel-nav-item {
  justify-content: center;
}

.ertel-nav {
  flex: 1;
  padding: var(--ertel-space-3);
}

.ertel-nav-item {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  padding: var(--ertel-space-3);
  border-radius: var(--ertel-radius-md);
  color: var(--ertel-ink-soft);
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-medium);
  margin-bottom: 2px;
  transition: background var(--ertel-transition-fast), color var(--ertel-transition-fast);
  white-space: nowrap;
}

.ertel-nav-item:hover {
  background: #14213D;
  color: #FFFFFF;
}
.ertel-nav-item:hover .ertel-nav-item__index {
  color: rgba(255, 255, 255, 0.6);
}

.ertel-nav-item[aria-current="page"] {
  background: #E8791E;
  color: #FFFFFF;
}
.ertel-nav-item[aria-current="page"] .ertel-nav-item__index {
  color: rgba(255, 255, 255, 0.75);
}

.ertel-nav-item[data-disabled="true"] {
  color: var(--ertel-muted);
  cursor: default;
}

.ertel-nav-item[data-disabled="true"]:hover {
  background: none;
}

.ertel-nav-item__index {
  font-family: var(--ertel-font-mono);
  font-size: 10px;
  color: var(--ertel-muted);
  width: 16px;
  flex-shrink: 0;
}

.ertel-nav-item__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ertel-nav-item__label {
  flex: 1;
}

.ertel-nav-item__badge {
  font-size: 10px;
  font-weight: var(--ertel-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ertel-muted);
  background: var(--ertel-surface-alt);
  border: 1px solid var(--ertel-border);
  padding: 2px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.ertel-sidebar__footer {
  padding: var(--ertel-space-3);
  border-top: 1px solid var(--ertel-border);
  flex-shrink: 0;
}

.ertel-sidebar__marca-fixa {
  text-align: center;
  font-size: 10px;
  color: var(--ertel-muted);
  opacity: 0.7;
  margin-top: 6px;
  letter-spacing: 0.2px;
}
.ertel-shell[data-sidebar="collapsed"] .ertel-sidebar__marca-fixa {
  display: none;
}

.ertel-sidebar__brand-logo {
  max-height: 32px;
  max-width: 140px;
  object-fit: contain;
}

.ertel-sidebar__collapse-btn {
  display: flex;
  align-items: center;
  gap: var(--ertel-space-3);
  width: 100%;
  padding: var(--ertel-space-2) var(--ertel-space-3);
  background: none;
  border: none;
  border-radius: var(--ertel-radius-md);
  color: var(--ertel-ink-soft);
  font-size: var(--ertel-text-sm);
  font-weight: var(--ertel-weight-medium);
  cursor: pointer;
  transition: background var(--ertel-transition-fast), color var(--ertel-transition-fast);
}
.ertel-sidebar__collapse-btn:hover {
  background: var(--ertel-surface-alt);
  color: var(--ertel-ink);
}
.ertel-sidebar__collapse-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--ertel-transition-base);
}
.ertel-shell[data-sidebar="collapsed"] .ertel-sidebar__collapse-btn {
  justify-content: center;
}
.ertel-shell[data-sidebar="collapsed"] .ertel-sidebar__collapse-label {
  display: none;
}
.ertel-shell[data-sidebar="collapsed"] .ertel-sidebar__collapse-icon {
  transform: rotate(180deg);
}

/* -- Conteúdo principal -------------------------------------------------------- */

.ertel-main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0; /* sem isso, qualquer tela com conteúdo largo empurra a página inteira, escondendo até o menu lateral */
  padding: var(--ertel-space-6);
}

/* -- Overlay do drawer mobile ---------------------------------------------- */

.ertel-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 26, 0.4);
  z-index: 9;
}

/* ==========================================================================
   Responsivo
   Abaixo de 900px: sidebar vira drawer sobreposto (off-canvas).
   ========================================================================== */

@media (max-width: 900px) {
  .ertel-shell,
  .ertel-shell[data-sidebar="collapsed"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .ertel-topbar__menu-toggle {
    display: flex;
  }

  .ertel-topbar__menu-toggle[data-action="toggle-collapse"] {
    display: none;
  }

  .ertel-sidebar__collapse-btn {
    display: none;
  }

  .ertel-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ertel-sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--ertel-transition-base);
    box-shadow: var(--ertel-shadow-lg);
  }

  .ertel-shell[data-sidebar-mobile="open"] .ertel-sidebar {
    transform: translateX(0);
  }

  .ertel-shell[data-sidebar-mobile="open"] .ertel-sidebar-overlay {
    display: block;
  }

  .ertel-shell[data-sidebar-mobile="open"] .ertel-sidebar__brand-name,
  .ertel-shell[data-sidebar-mobile="open"] .ertel-nav-item__label,
  .ertel-shell[data-sidebar-mobile="open"] .ertel-nav-item__badge {
    display: revert;
  }

  .ertel-main {
    padding: var(--ertel-space-4);
  }
}

@media (max-width: 480px) {
  .ertel-main {
    padding: var(--ertel-space-3);
  }
}

/* -- Sino de Notificação (Central de Ação) ------------------------------------------------- */

.ertel-topbar__sino {
  position: relative;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--ertel-radius-md);
  line-height: 1;
}
.ertel-topbar__sino:hover {
  background: var(--ertel-surface-alt);
}
.ertel-topbar__sino--piscando {
  animation: ertel-sino-piscar 0.4s ease-in-out 4;
}
@keyframes ertel-sino-piscar {
  0%, 100% { transform: rotate(0deg); color: inherit; }
  25% { transform: rotate(-15deg); color: var(--ertel-primary); }
  75% { transform: rotate(15deg); color: var(--ertel-primary); }
}
.ertel-topbar__sino-contador {
  position: absolute;
  top: 0;
  right: 2px;
  background: var(--ertel-crit-a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

/* Link discreto pro ambiente de Administração da Plataforma (Fase 2:
   Comercialização) — só aparece quando `sessao.tenant.superAdmin` é
   `true` (ver core/app.js); nunca visível pra um tenant comum. */
.ertel-topbar__link-plataforma {
  font-size: var(--ertel-text-xs);
  color: var(--ertel-muted);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-md);
  padding: 6px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.ertel-topbar__link-plataforma:hover {
  color: var(--ertel-primary);
  border-color: var(--ertel-primary);
}

/* -- Tela de Login ----------------------------------------------------------------------- */

.ertel-login-tela {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ertel-surface-alt);
  padding: var(--ertel-space-4);
}

.ertel-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--ertel-surface);
  border-radius: var(--ertel-radius-lg);
  box-shadow: var(--ertel-shadow-md);
  padding: var(--ertel-space-6) var(--ertel-space-5);
  text-align: center;
}

.ertel-login-card__marca {
  font-size: var(--ertel-text-2xl);
  font-weight: var(--ertel-weight-bold);
  color: var(--ertel-primary);
  letter-spacing: 1px;
}
.ertel-login-card__logo {
  max-height: 64px;
  max-width: 220px;
  object-fit: contain;
  margin: 0 auto var(--ertel-space-4);
  display: block;
}
.ertel-login-card__subtitulo {
  color: var(--ertel-muted);
  font-size: var(--ertel-text-sm);
  margin-top: -8px;
  margin-bottom: var(--ertel-space-5);
}

.ertel-login-form {
  text-align: left;
}
.ertel-login-form__erro {
  color: var(--ertel-crit-a);
  font-size: var(--ertel-text-sm);
  margin-top: var(--ertel-space-2);
}

.ertel-login-card__marca-fixa {
  text-align: center;
  font-size: 10px;
  color: var(--ertel-muted);
  opacity: 0.6;
  margin-top: var(--ertel-space-5);
  letter-spacing: 0.2px;
}

/* -- Splash de Inicialização (marca, opcional, pós-login) --------------------------------- */

.ertel-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0A0F18;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.ertel-splash--saindo {
  opacity: 0;
}
.ertel-splash__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

/* Gestão de Clientes (Fase 2) — tela cheia exibida no lugar do sistema
   inteiro quando o tenant está bloqueado por pendência financeira (ver
   core/app.js::renderBloqueioFinanceiro). Só aparece em modo backend;
   nunca existe em modo local. */
.ertel-bloqueio-financeiro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ertel-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ertel-space-6);
}

.ertel-bloqueio-financeiro__card {
  max-width: 440px;
  text-align: center;
  background: var(--ertel-surface);
  border: 1px solid var(--ertel-border);
  border-radius: var(--ertel-radius-lg);
  padding: var(--ertel-space-8) var(--ertel-space-6);
  box-shadow: var(--ertel-shadow-md);
}

.ertel-bloqueio-financeiro__icone {
  font-size: 40px;
  margin-bottom: var(--ertel-space-3);
}

.ertel-bloqueio-financeiro__card h1 {
  font-size: var(--ertel-text-xl);
  margin: 0 0 var(--ertel-space-3);
}

.ertel-bloqueio-financeiro__card p {
  color: var(--ertel-muted);
  font-size: var(--ertel-text-sm);
  margin: 0 0 var(--ertel-space-3);
}

.ertel-bloqueio-financeiro__card .ertel-btn {
  margin-top: var(--ertel-space-3);
}