/* Estrutura geral da página: shell, breadcrumb, footer, layout público. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--navbar-height);
    font-size: 0.8125rem;
    line-height: 1.55;
    /* Ambiente da empresa ativa (Sprint 010): um degradê pastel muito sutil
       (3–8% de mistura) sobre fundo claro. Cards continuam brancos — só o
       "ar" ao redor do conteúdo muda de tom conforme a cor da empresa. */
    background:
        radial-gradient(circle at 10% -15%, color-mix(in srgb, var(--brand-color) 7%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--brand-color) 4%, transparent) 0%, transparent 40%),
        var(--color-bg);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

a {
    color: var(--color-blue);
    text-decoration: none;
}

a:hover {
    color: var(--color-blue-dark);
}

.app-wrapper {
    min-height: calc(100vh - var(--navbar-height));
    align-items: stretch;
}

.app-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.app-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.6rem 2rem;
    animation: fadeSlideUp var(--transition-base) both;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.page-heading {
    min-width: 0;
}

.page-title {
    font-size: 1.25rem;
    margin: 0 0 0.2rem;
}

.page-subtitle {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 0.8125rem;
}

/* Breadcrumb */
.app-breadcrumb {
    margin-bottom: 1rem;
}

.app-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    margin: 0;
    font-size: 0.6875rem;
    color: var(--color-text-faint);
    flex-wrap: wrap;
}

.app-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.app-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--color-border-strong);
}

.app-breadcrumb a {
    color: var(--color-text-muted);
    font-weight: 500;
}

.app-breadcrumb a:hover {
    color: var(--color-blue);
}

.app-breadcrumb .is-current {
    color: var(--color-text);
    font-weight: 600;
}

/* Footer */
.app-footer {
    border-top: 1px solid var(--color-border);
    background-color: color-mix(in srgb, var(--color-surface) 92%, var(--brand-color) 3%);
    padding: 0.8rem 2rem;
    color: var(--color-text-faint);
    font-size: 0.6875rem;
    text-align: center;
}

/* Layout público (login / erros) — sem empresa ativa ainda, tom neutro azul/verde */
.app-public-body {
    padding-top: 0;
    background:
        radial-gradient(circle at 15% 10%, var(--color-green-soft) 0%, transparent 42%),
        radial-gradient(circle at 85% 0%, var(--color-blue-soft) 0%, transparent 38%),
        var(--color-bg);
    background-attachment: fixed;
}

.app-public-main {
    min-height: 100vh;
    padding: 1.6rem;
}

.app-public-content {
    width: 100%;
    max-width: 340px;
    animation: fadeSlideUp var(--transition-base) both;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}