/* Ziggy app — ajustes sobre o Framework7 8 + tema Yui. A cor principal (#5C68E2) é injetada no arranque
   (Framework7 `colors`), aqui só o que a Yui não cobre e a integração do componente do Ziggy. */
:root {
    --zg-a: #A585FF;
    --zg-b: #5C68E2;
    --f7-navbar-height: 56px;
    --f7-login-screen-bg-color: var(--background-color);
}
html, body { overscroll-behavior-y: none; }

/* ---- barra de navegação: título com subtítulo (empresa) */
.navbar .title { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.navbar .nav-title { font-weight: 600; font-size: 17px; color: var(--title-color); }
.navbar .nav-subtitle { font-size: 11.5px; font-weight: 400; color: var(--text-color); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar .icon { color: var(--title-color); }

/* ---- o componente do Ziggy dentro da página (em vez de ocupar a janela toda) */
.page-chat .page-content.zg-host { padding: 0; overflow: hidden; position: relative; }
.zg-host .zg-page .zg-panel { position: absolute; inset: 0; }        /* a barra é do Framework7 */
.zg-host .zg-head { display: none; }                                 /* cabeçalho do componente: já temos a navbar */
.zg-host .zg-root { font-family: "Rubik", -apple-system, "Segoe UI", Roboto, sans-serif; }
.zg-host .zg-body { padding-bottom: 1rem; }
.zg-host .zg-foot { padding-bottom: calc(.6rem + var(--f7-safe-area-bottom)); }

/* ---- painel lateral */
.panel .profile-image img { width: 96px; background: #fff; }
.panel .profile-name { font-size: 18px; }
.panel .profile-subtitle { text-align: center; padding: 0 16px; }
.panel-foot { text-align: center; font-size: 12px; color: var(--text-color); margin: 24px 0 8px; }

/* ---- tema escuro: paleta do Ziggy (sobrepõe a da Yui, que é azulada) e o componente do chat */
.dark {
    --title-color: #eef0f8;
    --text-color: #a2a8bd;
    --background-color: #12141c;
    --light-gray: #232738;
    --card-color: #1c1f2b;
    --line-color: #2b3040;
    --f7-list-item-border-color: rgba(255,255,255,.08);
    --f7-page-bg-color: #12141c;
    --f7-navbar-bg-color: #171a25;
    --f7-panel-bg-color: #171a25;
    --f7-dialog-bg-color: #1c1f2b;
    --f7-dialog-text-color: #eef0f8;
    --f7-toast-bg-color: #2b3040;
    --zg-bg: #1c1f2b;
    --zg-bg-soft: #12141c;
    --zg-fg: #eef0f8;
    --zg-muted: #a2a8bd;
    --zg-line: #2b3040;
    --zg-user: #2a2f55;
}
:root { --card-color: #ffffff; --line-color: #e5e7f0; }
.dark .navbar .navbar-bg { background: var(--f7-navbar-bg-color); }
.dark .navbar .nav-title, .dark .navbar .icon { color: #fff; }
.dark .panel .profile-image img { background: #232738; }
.dark input[type="text"], .dark input[type="password"], .dark input[type="email"] { background-color: var(--light-gray); color: var(--title-color); }
.dark ::placeholder { color: #7c8499; }

/* ---- interruptor claro/escuro da Yui (ícone lua/sol): na barra do chat e por cima do cartão do login */
.login-topbar { width: 100%; max-width: 420px; margin: 0 auto 10px; display: flex; justify-content: flex-end; }
.switch-theme--login { width: 42px; height: 42px; border-radius: 50%; background: var(--card-color); border: 1px solid var(--line-color); box-shadow: 0 6px 18px rgba(31,35,51,.08); color: var(--title-color); }
.switch-theme--login .icon { font-size: 22px; }

/* ---- ecrã de entrada: fundo com gradiente e cartão */
.login-screen-content {
    padding: 24px 16px; display: flex; flex-direction: column; justify-content: center; min-height: 100%;
    background:
        radial-gradient(60% 40% at 20% 0%, rgba(165,133,255,.28), transparent 70%),
        radial-gradient(50% 40% at 100% 100%, rgba(92,104,226,.24), transparent 70%),
        var(--background-color);
}
.login-card { box-sizing: border-box;
    width: 100%; max-width: 420px; margin: 0 auto; padding: 24px 22px 18px;
    background: var(--card-color); border: 1px solid var(--line-color); border-radius: 22px;
    box-shadow: 0 20px 50px rgba(31,35,51,.10);
}
.dark .login-card { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.login-screen .signin-image img { width: 46%; max-width: 200px; margin: 0 auto; }
.login-screen h1 { margin: 6px 0 4px; font-size: 26px; }
.login-lead { color: var(--text-color); margin: 0 0 22px; font-size: 15px; line-height: 1.4; }
.login-screen form input { margin-bottom: 14px; }
.login-remember { display: flex; align-items: center; gap: 10px; margin: 2px 4px 16px; font-size: 14px; color: var(--text-color); }
.login-remember .icon-checkbox { flex: 0 0 auto; }
.login-button { --f7-button-bg-color: var(--zg-b); background: linear-gradient(135deg, var(--zg-a), var(--zg-b)); border-radius: 12px; font-weight: 600; height: 48px; line-height: 48px; box-shadow: 0 10px 24px rgba(92,104,226,.28); }
.login-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(220,53,69,.10); color: #dc3545; font-size: 13px; }
.login-screen .signin-links { margin: 22px 0 8px; font-size: 14px; }
.login-screen .signin-links a { color: var(--zg-b); }

/* ---- a Yui estica as imagens do conteúdo a 100%: dentro do Ziggy mandam as regras do componente */
.zg-host img { width: auto; max-width: 100%; border-radius: 0; }
.zg-host .zg-hero { width: 4.5rem; }
.zg-host .zg-row-avatar { width: 1.7rem; height: 1.7rem; }
.zg-host .zg-avatar img { width: 82%; height: 82%; }
.zg-host .zg-body { width: 100%; }
.zg-host .zg-msg table { width: 100%; }