/*
 * Tema SEAWEB "Deep Atlantic" para o shell SB Admin 2.
 * Carregado DEPOIS do sb-admin-2.min.css — substitui a paleta azul default
 * (#4e73df) pelas cores do pacote de marca SEAWEB. Não editar o .min.css.
 *
 * Paleta (seaweb-brand/README.md):
 *   Abyss #05171F · Deep #0A2A35 · Current #0F4A56 · Surf #3AD0DD
 *   Teal #0E8A95 · Foam #EEF6F6 · Ember #FF8B5C (parcimónia)
 */

:root {
    --sw-abyss: #05171F;
    --sw-deep: #0A2A35;
    --sw-current: #0F4A56;
    --sw-surf: #3AD0DD;
    --sw-surf-escuro: #25B6C3;   /* hover de botões surf sobre fundo claro */
    --sw-teal: #0E8A95;
    --sw-teal-escuro: #0A6B6F;
    --sw-foam: #EEF6F6;
}

/* ── Fundos de marca (sidebar da app + fundo das páginas de auth) ────────── */
.bg-gradient-primary {
    background-color: var(--sw-deep);
    background-image: linear-gradient(180deg, var(--sw-deep) 10%, var(--sw-current) 100%);
    background-size: cover;
}

.bg-primary { background-color: var(--sw-teal) !important; }

/* ── Ligações ────────────────────────────────────────────────────────────── */
a { color: var(--sw-teal); }
a:hover { color: var(--sw-teal-escuro); }

.text-primary { color: var(--sw-teal) !important; }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn-primary {
    color: var(--sw-abyss);
    background-color: var(--sw-surf);
    border-color: var(--sw-surf);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: var(--sw-abyss);
    background-color: var(--sw-surf-escuro);
    border-color: var(--sw-surf-escuro);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(58, 208, 221, 0.4);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: var(--sw-abyss);
    background-color: var(--sw-surf);
    border-color: var(--sw-surf);
    opacity: 0.55;
}

.btn-outline-primary { color: var(--sw-teal); border-color: var(--sw-teal); }

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--sw-teal);
    border-color: var(--sw-teal);
}

.btn-link { color: var(--sw-teal); }
.btn-link:hover { color: var(--sw-teal-escuro); }

/* ── Badges, cartões e realces ───────────────────────────────────────────── */
.badge-primary { background-color: var(--sw-teal); }

.border-left-primary { border-left-color: var(--sw-teal) !important; }
.border-bottom-primary { border-bottom-color: var(--sw-teal) !important; }

.progress-bar { background-color: var(--sw-teal); }

/* ── Formulários ─────────────────────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--sw-surf);
    box-shadow: 0 0 0 0.2rem rgba(58, 208, 221, 0.25);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--sw-teal);
    border-color: var(--sw-teal);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(58, 208, 221, 0.25);
}

/* ── Paginação ───────────────────────────────────────────────────────────── */
.page-link { color: var(--sw-teal); }
.page-link:hover { color: var(--sw-teal-escuro); }

.page-item.active .page-link {
    color: var(--sw-abyss);
    background-color: var(--sw-surf);
    border-color: var(--sw-surf);
}

/* ── Dropdowns, pills e navegação ────────────────────────────────────────── */
.dropdown-item:active { background-color: var(--sw-teal); color: #fff; }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--sw-teal);
}

/* ── Diversos SB Admin ───────────────────────────────────────────────────── */
.scroll-to-top { background: rgba(14, 138, 149, 0.5); }
.scroll-to-top:hover { background: var(--sw-teal); }

.spinner-border.text-primary { color: var(--sw-teal) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Shell da aplicação — aprofundamento do tema
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fundo geral com um toque de Foam (em vez do cinza azulado do SB Admin) */
body { background-color: #F2F7F8; }

#content { background-color: #F2F7F8; }

/* Texto principal: tinta da marca em vez do cinza do template */
.text-gray-800 { color: #08202A !important; }
.text-gray-900 { color: #05171F !important; }

/* Cartões */
.card { border-color: #D9E8EA; }
.card .card-header {
    background-color: #EEF6F6;
    border-bottom-color: #D9E8EA;
}
.card .card-header .m-0.font-weight-bold { color: var(--sw-teal); }

/* Tabelas */
.table thead th {
    background-color: #EEF6F6;
    color: #08202A;
    border-bottom: 2px solid #C7E0E3;
}
.table td, .table th { border-top-color: #E2EEF0; }
.table-hover tbody tr:hover { background-color: rgba(58, 208, 221, 0.06); }

/* Topbar */
.topbar { border-bottom: 1px solid #E2EEF0; }
.topbar .navbar-search .form-control { background-color: #EEF6F6 !important; }

/* Sidebar — marca SEAWEB */
.sidebar-brand.sw-brand { height: auto; padding: 1.35rem 1rem 1.1rem; text-decoration: none; }
.sw-brand-mark { height: 44px; width: 44px; flex-shrink: 0; }
.sw-brand-texto { text-align: left; margin-left: .8rem; }
.sw-brand-texto .nome {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600; font-size: .95rem; letter-spacing: -0.01em;
    color: var(--sw-foam); line-height: 1.25; text-transform: none;
}
.sw-brand-texto .por {
    font-family: "IBM Plex Mono", monospace;
    font-size: .58rem; letter-spacing: .18em; color: #7EE7EF;
    text-transform: uppercase; margin-top: .15rem;
}
.sidebar .sidebar-divider { border-top-color: rgba(238, 246, 246, 0.15); }
.sidebar-dark .nav-item .nav-link i { color: rgba(238, 246, 246, 0.45); }
.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item.active .nav-link i { color: var(--sw-surf); }
.sidebar-dark #sidebarToggle { background-color: rgba(238, 246, 246, 0.2); }

/* Alertas informativos na família da marca */
.alert-info {
    color: #0A4A52; background-color: #DFF4F6; border-color: #BFE8EC;
}

/* Modais */
.modal-header { background-color: #EEF6F6; border-bottom-color: #D9E8EA; }

/* Dropdown do utilizador / cabeçalhos pequenos */
.dropdown .dropdown-menu .dropdown-header { color: var(--sw-teal); }

/* ═══════════════════════════════════════════════════════════════════════════
   Auth split-panel (layouts/sbadmin-guest)
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-auth { border-radius: 16px; }

.sw-auth-marca {
    position: relative; overflow: hidden;
    flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(420px 260px at 85% -10%, rgba(15, 74, 86, 0.65), transparent 65%),
        linear-gradient(165deg, var(--sw-deep), var(--sw-abyss));
}

/*
   O selector é assim de propósito. A linha tem `no-gutters`, e o Bootstrap
   traz `.no-gutters > [class*=col-] { padding-left: 0; padding-right: 0 }` —
   com mais especificidade do que `.sw-auth-marca` sozinho. O resultado era o
   painel a aplicar o espaçamento em cima e em baixo e nenhum aos lados: o
   texto colado à margem esquerda.

   3rem iguala o `.p-5` que o painel do formulário usa do outro lado, para os
   dois terem o mesmo respiro.
*/
.no-gutters > .sw-auth-marca,
.sw-auth-marca { padding: 3rem 3rem 2rem; }

.sw-auth-ondas {
    position: absolute; left: -10%; right: -10%; bottom: -6%;
    width: 120%; opacity: 0.35; pointer-events: none;
}

.sw-auth-marca-conteudo { position: relative; }

.sw-auth-logo { height: 30px; width: auto; margin-bottom: 2rem; display: block; }

.sw-auth-produto {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em;
    color: var(--sw-foam); margin-bottom: .5rem;
}
.sw-auth-produto span {
    font-family: "IBM Plex Mono", monospace; font-weight: 400;
    font-size: .8em; color: var(--sw-surf);
}

.sw-auth-frase {
    font-family: "Space Grotesk", system-ui, sans-serif;
    color: #9FBFC9; font-size: .95rem; line-height: 1.55;
    max-width: 20em; margin-bottom: 1.8rem;
}

.sw-auth-checks { list-style: none; padding: 0; margin: 0; }
.sw-auth-checks li {
    font-family: "IBM Plex Mono", monospace; font-size: .74rem;
    color: var(--sw-foam); padding: .28rem 0; opacity: .9;
}
.sw-auth-checks li::before { content: "✓ "; color: var(--sw-surf); font-weight: 700; }

.sw-auth-rodape {
    position: relative; font-family: "IBM Plex Mono", monospace;
    font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
    color: #7EE7EF; opacity: .8; margin: 2rem 0 0;
}
.sw-auth-rodape strong { color: var(--sw-foam); }

/* Formulário (painel direito) */
.sw-auth-form .sw-titulo {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 700; font-size: 1.45rem; letter-spacing: -0.015em;
    color: #08202A; margin-bottom: .35rem;
}
.sw-auth-form .sw-subtitulo { color: #4A6A74; font-size: .92rem; margin-bottom: 1.6rem; }

.sw-auth-voltar a {
    color: rgba(238, 246, 246, 0.75); font-size: .85rem; text-decoration: none;
}
.sw-auth-voltar a:hover { color: var(--sw-surf); }

/* CAPTCHA (Cloudflare Turnstile) no formulário de registo.

   O widget tem 300px FIXOS e não há atributo que o encolha: o `compact` troca-o
   por outro widget (150x140) e o `flexible` tem os mesmos 300px de mínimo.
   No painel do formulário há menos do que isso em qualquer telemóvel —
   `largura - 30px de container - 96px de padding`, ou seja 176px num ecrã de
   320px — e o widget saía por cima da margem do cartão, para dentro do fundo
   azul. Daí o transform: é a única forma de o meter lá dentro.

   Os 426px do primeiro media query são o ponto onde os 300px passam a caber.
   Cada escala é calculada pela largura MAIS ESTREITA do seu intervalo
   (176/300 e 216/300), para que o pior caso caiba — no topo do intervalo fica
   um pouco mais pequeno do que precisava, o que não se nota.

   Sem `height`: o transform não encolhe a caixa, por isso sobra um pouco de
   espaço por baixo do widget. É de propósito. Uma altura fixa ficava bonita
   com o widget normal e depois passava por cima do botão quando ele cresce —
   e ele cresce, em erro, em expirado, e quando pede confirmação. */
.sw-turnstile > .cf-turnstile {
    transform: scale(var(--sw-turnstile-escala, 1));
    transform-origin: left top;
}
@media (max-width: 425.98px) { .sw-turnstile { --sw-turnstile-escala: .72; } }
@media (max-width: 359.98px) { .sw-turnstile { --sw-turnstile-escala: .58; } }

/* ── Painel de controlo — cartão de boas-vindas ──────────────────────────── */
.sw-painel-hero {
    position: relative; overflow: hidden; border-radius: 14px;
    background:
        radial-gradient(500px 260px at 85% -20%, rgba(15, 74, 86, 0.6), transparent 65%),
        linear-gradient(165deg, var(--sw-deep), var(--sw-abyss));
}
.sw-painel-ondas {
    position: absolute; left: -5%; right: -5%; bottom: -12%;
    width: 110%; opacity: 0.3; pointer-events: none;
}
.sw-painel-titulo {
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-weight: 700; font-size: 1.5rem; letter-spacing: -0.015em;
    color: var(--sw-foam);
}
.sw-painel-sub {
    color: #9FBFC9; font-size: .95rem; max-width: 34em; margin-left: auto; margin-right: auto;
}
.sw-painel-hero a.small { color: var(--sw-surf); }
.sw-painel-hero a.small:hover { color: #7EE7EF; }

/* ═══════════════════════════════════════════════════════════════════════════
   Cores semânticas harmonizadas com a marca
   Mantêm o significado (verde=sucesso, vermelho=perigo, laranja=aviso) mas
   afinadas ao "Deep Atlantic": verde com fundo de mar, aviso = Ember (o
   acento quente da marca), perigo em coral profundo, info = Teal.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --sw-sucesso: #10A57E;         /* verde-mar */
    --sw-sucesso-escuro: #0C8163;
    --sw-aviso: #FF8B5C;           /* Ember — o acento quente da marca */
    --sw-aviso-escuro: #F0764A;
    --sw-perigo: #E25344;          /* coral profundo */
    --sw-perigo-escuro: #C43F31;
    --sw-secundario: #5E7B86;      /* ardósia fria com fundo teal */
    --sw-secundario-escuro: #4E6871;
}

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn-success { background-color: var(--sw-sucesso); border-color: var(--sw-sucesso); }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--sw-sucesso-escuro); border-color: var(--sw-sucesso-escuro);
}
.btn-success:focus, .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(16, 165, 126, 0.35);
}

.btn-danger { background-color: var(--sw-perigo); border-color: var(--sw-perigo); }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--sw-perigo-escuro); border-color: var(--sw-perigo-escuro);
}
.btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(226, 83, 68, 0.35);
}

.btn-warning { color: var(--sw-abyss); background-color: var(--sw-aviso); border-color: var(--sw-aviso); }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    color: var(--sw-abyss); background-color: var(--sw-aviso-escuro); border-color: var(--sw-aviso-escuro);
}
.btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 139, 92, 0.4);
}

.btn-info { background-color: var(--sw-teal); border-color: var(--sw-teal); }
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--sw-teal-escuro); border-color: var(--sw-teal-escuro);
}
.btn-info:focus, .btn-info:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(14, 138, 149, 0.35);
}

.btn-secondary { background-color: var(--sw-secundario); border-color: var(--sw-secundario); }
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--sw-secundario-escuro); border-color: var(--sw-secundario-escuro);
}

.btn-dark { background-color: var(--sw-deep); border-color: var(--sw-deep); }
.btn-dark:hover { background-color: var(--sw-abyss); border-color: var(--sw-abyss); }

.btn-outline-success { color: var(--sw-sucesso); border-color: var(--sw-sucesso); }
.btn-outline-success:hover { background-color: var(--sw-sucesso); border-color: var(--sw-sucesso); color: #fff; }
.btn-outline-danger { color: var(--sw-perigo); border-color: var(--sw-perigo); }
.btn-outline-danger:hover { background-color: var(--sw-perigo); border-color: var(--sw-perigo); color: #fff; }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge-success { background-color: var(--sw-sucesso); }
.badge-danger { background-color: var(--sw-perigo); }
.badge-warning { color: var(--sw-abyss); background-color: var(--sw-aviso); }
.badge-info { background-color: var(--sw-teal); }
.badge-secondary { background-color: var(--sw-secundario); }

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.alert-success { color: #0B6B52; background-color: #E1F5EE; border-color: #BCE8DA; }
.alert-danger { color: #8C3325; background-color: #FBE7E3; border-color: #F4C4BC; }
.alert-warning { color: #A34A22; background-color: #FFEFE6; border-color: #FFD4BC; }

/* ── Utilitários de texto/fundo/realce ───────────────────────────────────── */
.text-success { color: var(--sw-sucesso) !important; }
.text-danger { color: var(--sw-perigo) !important; }
.text-warning { color: var(--sw-aviso-escuro) !important; }
.text-info { color: var(--sw-teal) !important; }

.bg-success { background-color: var(--sw-sucesso) !important; }
.bg-danger { background-color: var(--sw-perigo) !important; }
.bg-warning { background-color: var(--sw-aviso) !important; }
.bg-info { background-color: var(--sw-teal) !important; }

.border-left-success { border-left-color: var(--sw-sucesso) !important; }
.border-left-danger { border-left-color: var(--sw-perigo) !important; }
.border-left-warning { border-left-color: var(--sw-aviso) !important; }
.border-left-info { border-left-color: var(--sw-teal) !important; }

/* Validação de formulários (is-invalid/is-valid do Bootstrap) */
.form-control.is-invalid { border-color: var(--sw-perigo); }
.form-control.is-invalid:focus {
    border-color: var(--sw-perigo);
    box-shadow: 0 0 0 0.2rem rgba(226, 83, 68, 0.25);
}
.invalid-feedback { color: var(--sw-perigo-escuro); }
.form-control.is-valid { border-color: var(--sw-sucesso); }

/* ── Barra de acções no topo das páginas ──────────────────────────────────
   Os botões podem ser muitos (o detalhe de um SAFT chega aos onze) e o ecrã
   pequeno. Sem quebra de linha não transbordavam a página: eram cortados
   pelo overflow-x:hidden do #content-wrapper, ficando invisíveis e sem
   qualquer forma de lá chegar. A quebra fica na classe e não em cada botão
   para que um botão novo herde o comportamento. */
.sw-accoes { flex-wrap: wrap; }
.sw-accoes > * { margin-bottom: .5rem; max-width: 100%; }

/* A quebra de linha não chega quando um botão sozinho é mais largo do que a
   barra: num ecrã de 320 px sobram 144 px e "Relatório Impostos" precisa de
   189. O .btn do Bootstrap traz white-space:nowrap, por isso o rótulo não
   enrolava e o botão saía para fora. Assim cresce em altura, não em largura. */
.sw-accoes .btn { white-space: normal; max-width: 100%; }

/* A paginação do Bootstrap é um flex sem quebra: num ficheiro com muitas
   páginas os números saíam do ecrã e eram cortados como os botões acima. */
.pagination { flex-wrap: wrap; }