/* ==========================================================================
   layout.css — login, menu lateral flutuante, painel da página, barra inferior
   (telemóvel) e botão "+"
   ========================================================================== */

/* ---------- Login ---------- */
.login {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px 16px;
}
.login-card {
  width: 100%; max-width: 410px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: 40px 36px 34px;
  box-shadow: var(--shadow-lg);
  display: grid; gap: 14px;
}
.login-logo { display: grid; place-items: center; margin-bottom: 4px; }
.login-logo img { width: 210px; height: auto; display: block; }
.login-title { margin-top: 4px; text-align: center; font-size: 1.5rem; }
.login-card > p.muted { text-align: center; margin-top: -6px; }
.login-msg { min-height: 1.4em; color: var(--danger); font-size: .9rem; text-align: center; }
.login-msg.info { color: var(--text-2); }

/* ---------- Marca ---------- */
.brand { display: flex; align-items: center; gap: 12px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; color: inherit; }
.brand-img { display: block; width: auto; height: 26px; }
.brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Estrutura da app ---------- */
.app { min-height: 100vh; min-height: 100dvh; }

/* Menu lateral: um painel verde flutuante, de cantos bem redondos */
.sidebar {
  position: fixed; top: var(--gap-page); bottom: var(--gap-page); left: var(--gap-page);
  width: var(--sidebar-w);
  background:
    radial-gradient(260px 200px at 0% 0%, rgba(169, 221, 59, .22), transparent 70%),
    var(--grad-side);
  color: #fff;
  border-radius: 32px;
  padding: 26px 14px 16px;
  display: flex; flex-direction: column; gap: 26px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.sidebar .brand { padding: 0 10px; color: #fff; justify-content: center; }
.sidebar-foot { margin-top: auto; display: grid; gap: 12px; justify-items: center; }
.sidebar-tools { display: flex; justify-content: center; gap: 10px; }
.app-version { font-size: .72rem; letter-spacing: .04em; color: rgba(255, 255, 255, .5); text-align: center; }

.nav { display: grid; gap: 3px; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.nav-link svg { flex: none; }
.nav-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--lime-2); color: var(--brand-dark); font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.5; }
.nav-count[hidden] { display: none; }

/* No menu verde as ligações são claras e a ativa tem a cor da marca */
.sidebar .nav-link { color: rgba(255, 255, 255, .74); }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.sidebar .nav-link[aria-current="page"] {
  background: rgba(169, 221, 59, .16);
  color: var(--lime-soft);
  box-shadow: inset 0 0 0 1px rgba(169, 221, 59, .28);
  font-weight: 600;
}
.sidebar .icon-btn { background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .82); }
.sidebar .icon-btn:hover { background: rgba(169, 221, 59, .2); color: var(--lime-soft); }

.topbar { display: none; }

/* O painel onde vive cada página (como o painel translúcido das referências) */
.view {
  margin: var(--gap-page) var(--gap-page) var(--gap-page) calc(var(--sidebar-w) + var(--gap-page) * 2);
  min-height: calc(100dvh - var(--gap-page) * 2);
  padding: 38px 40px 120px;
  max-width: 1320px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 36px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  outline: none;
}
:root[data-theme="dark"] .view { border-color: var(--border); }
@media (min-width: 1700px) { .view { margin-right: auto; } }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.page-head p { margin-top: 6px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Botões pequenos só com ícone (tema e bloquear) */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--text-2);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { display: block; }

/* ---------- Botão "+" ---------- */
.fab-wrap { position: fixed; right: 36px; bottom: 34px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab {
  width: 60px; height: 60px; border-radius: 22px;
  border: 0; cursor: pointer;
  background: var(--grad-lime); color: var(--brand-dark);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px rgba(131, 210, 59, .5), 0 2px 6px rgba(13, 38, 31, .2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab:hover { transform: translateY(-2px) scale(1.03); }
.fab[aria-expanded="true"] svg { transform: rotate(45deg); }
.fab svg { transition: transform .15s ease; }
.fab-menu {
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid; gap: 2px;
}
.fab-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 0; background: none; cursor: pointer;
  border-radius: 14px; text-align: left; width: 100%; font-weight: 550;
}
.fab-item:hover, .fab-item:focus-visible { background: var(--accent-soft); color: var(--accent); }
.fab-item svg { color: var(--text-3); flex: none; transition: color .15s ease; }
.fab-item:hover svg, .fab-item:focus-visible svg { color: var(--accent); }

/* ---------- Barra inferior (telemóvel) ---------- */
.bottomnav { display: none; }

@media (max-width: 860px) {
  .sidebar { display: none; }

  /* Barra de cima: uma "pílula" flutuante */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    margin: calc(10px + env(safe-area-inset-top)) 12px 0;
    padding: 8px 10px 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow);
  }
  .topbar .brand-img { height: 22px; }
  .topbar .brand-name { font-size: 1.02rem; }

  .view {
    margin: 0; padding: 16px 14px 150px; max-width: none; min-height: 0; overflow-x: clip;   /* nada (ex.: a dica do gráfico) alarga a página */
    background: none; border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  h1 { font-size: 1.4rem; }
  .page-head { margin-bottom: 14px; gap: 10px; }
  .page-head:not(:has(.page-actions)) > div > p.muted { display: none; }   /* textos de ajuda das listas: ocupam muito no telemóvel (nas fichas o texto é informação) */
  .tabs { margin-bottom: 14px; }
  .tab { padding: 6px 14px; font-size: .9rem; }
  nav.tabs { margin-top: 0; }

  .bottomnav {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--grad-side);
    border-radius: 28px;
    padding: 8px 6px;
    box-shadow: var(--shadow-lg);
  }
  .bottomnav .nav-link {
    flex-direction: column; gap: 3px; padding: 7px 2px;
    font-size: .7rem; text-align: center; justify-content: center;
    color: rgba(255, 255, 255, .72); border-radius: 20px;
  }
  .bottomnav .nav-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  .bottomnav .nav-link[aria-current="page"] { background: rgba(169, 221, 59, .16); color: var(--lime-soft); box-shadow: none; }

  .fab-wrap { right: 18px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .fab { width: 54px; height: 54px; border-radius: 20px; }
}