/* =========================================================================
   ForTrash UI — sistema de design (glassmorphism)
   =========================================================================
   Identidade mantida: verde da marca #00ad6f e azul-noite #1d214e.

   Notas de implementacao:
   - O vidro precisa de fundo colorido por baixo para se ler; por isso o body
     tem gradientes fixos (.ft-aurora) e os cartoes ficam por cima.
   - backdrop-filter e pesado em Android antigo: usa-se apenas em superficies
     grandes e estaticas, nunca em listas longas nem em elementos animados.
   - Tudo em variaveis para o tema escuro ser so uma troca de tokens.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
    /* Marca */
    --ft-green: #00ad6f;
    --ft-green-bright: #12d992;
    --ft-green-deep: #00714a;
    --ft-navy: #1d214e;
    --ft-aqua: #03c3ec;
    --ft-amber: #ffab00;
    --ft-coral: #ff3e1d;

    /* Superficie */
    --ft-bg: #eef3f1;
    --ft-bg-2: #e3ecf3;
    --ft-ink: #16192f;
    --ft-ink-soft: #5b6478;
    --ft-ink-faint: #8b94a7;

    /* Vidro */
    --ft-glass: rgba(255, 255, 255, 0.62);
    --ft-glass-strong: rgba(255, 255, 255, 0.82);
    --ft-glass-border: rgba(255, 255, 255, 0.75);
    --ft-glass-blur: 18px;

    /* Sombra: difusa e larga, para o vidro parecer levantado do fundo */
    --ft-shadow-sm: 0 2px 8px rgba(22, 25, 47, 0.06);
    --ft-shadow: 0 12px 32px -12px rgba(22, 25, 47, 0.18);
    --ft-shadow-lg: 0 28px 64px -24px rgba(22, 25, 47, 0.28);
    --ft-glow: 0 8px 32px -8px rgba(0, 173, 111, 0.45);

    --ft-r-sm: 10px;
    --ft-r: 16px;
    --ft-r-lg: 24px;
    --ft-r-xl: 32px;

    --ft-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ft-fast: 160ms var(--ft-ease);
    --ft-slow: 420ms var(--ft-ease);

    --ft-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ft-font-display: 'Sora', var(--ft-font);
}

[data-ft-theme='dark'] {
    --ft-bg: #0b0f1d;
    --ft-bg-2: #101830;
    --ft-ink: #eef2ff;
    --ft-ink-soft: #9aa4c0;
    --ft-ink-faint: #6b7590;

    --ft-glass: rgba(28, 36, 62, 0.58);
    --ft-glass-strong: rgba(28, 36, 62, 0.82);
    --ft-glass-border: rgba(255, 255, 255, 0.10);

    --ft-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --ft-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
    --ft-shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.7);
}

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

body.ft {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ft-font);
    color: var(--ft-ink);
    background: var(--ft-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fundo vivo: sem isto o vidro nao tem nada para desfocar e parece cinzento.
   Fixo no viewport para nao repintar durante o scroll. */
.ft-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60rem 40rem at 12% -8%, rgba(0, 173, 111, 0.28), transparent 60%),
        radial-gradient(50rem 36rem at 92% 8%, rgba(3, 195, 236, 0.22), transparent 62%),
        radial-gradient(46rem 40rem at 76% 96%, rgba(18, 217, 146, 0.18), transparent 60%),
        linear-gradient(168deg, var(--ft-bg) 0%, var(--ft-bg-2) 100%);
}

.ft-aurora::after {
    /* Grao fino: tira o aspeto "plastico" dos gradientes puros. */
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- tipografia */
.ft-display {
    font-family: var(--ft-font-display);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
}

.ft-h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
.ft-h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.ft-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.ft-lead {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: var(--ft-ink-soft);
    line-height: 1.65;
    margin: 0;
}

.ft-muted { color: var(--ft-ink-soft); }
.ft-faint { color: var(--ft-ink-faint); }

.ft-gradient-text {
    background: linear-gradient(120deg, var(--ft-green-deep), var(--ft-green) 45%, var(--ft-aqua));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ft-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ft-green-deep);
}

/* -------------------------------------------------------------- vidro */
.ft-glass {
    background: var(--ft-glass);
    backdrop-filter: blur(var(--ft-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--ft-glass-blur)) saturate(160%);
    border: 1px solid var(--ft-glass-border);
    border-radius: var(--ft-r-lg);
    box-shadow: var(--ft-shadow);
}

.ft-glass-strong {
    background: var(--ft-glass-strong);
}

/* Risco de luz no topo — e o que faz o painel ler como vidro e nao como
   um rectangulo translucido. */
.ft-glass-sheen {
    position: relative;
    overflow: hidden;
}

.ft-glass-sheen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}

/* -------------------------------------------------------------- cartoes */
.ft-card {
    padding: 1.5rem;
    background: var(--ft-glass);
    backdrop-filter: blur(var(--ft-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--ft-glass-blur)) saturate(160%);
    border: 1px solid var(--ft-glass-border);
    border-radius: var(--ft-r-lg);
    box-shadow: var(--ft-shadow);
    transition: transform var(--ft-fast), box-shadow var(--ft-fast);
}

.ft-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--ft-shadow-lg);
}

/* Cartao de metrica (KPI) */
.ft-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem;
    overflow: hidden;
}

.ft-stat::after {
    /* Halo de cor que identifica a metrica sem precisar de moldura. */
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: var(--ft-accent, var(--ft-green));
    opacity: 0.14;
    filter: blur(28px);
    pointer-events: none;
}

.ft-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ft-ink-soft);
}

.ft-stat-value {
    font-family: var(--ft-font-display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ft-stat-foot {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--ft-ink-soft);
}

.ft-stat-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    color: var(--ft-accent, var(--ft-green));
    background: color-mix(in srgb, var(--ft-accent, var(--ft-green)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ft-accent, var(--ft-green)) 22%, transparent);
}

.ft-stat-icon svg { width: 1.35rem; height: 1.35rem; }

/* -------------------------------------------------------------- botoes */
.ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    font-family: var(--ft-font);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--ft-fast), box-shadow var(--ft-fast), background var(--ft-fast);
}

.ft-btn:active { transform: translateY(1px) scale(0.99); }

.ft-btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--ft-green) 0%, var(--ft-green-bright) 100%);
    box-shadow: var(--ft-glow);
}

.ft-btn-primary:hover {
    box-shadow: 0 12px 40px -8px rgba(0, 173, 111, 0.6);
    transform: translateY(-2px);
}

.ft-btn-ghost {
    color: var(--ft-ink);
    background: var(--ft-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--ft-glass-border);
}

.ft-btn-ghost:hover {
    background: var(--ft-glass-strong);
    transform: translateY(-2px);
}

.ft-btn-block { width: 100%; }
.ft-btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

.ft-btn svg { width: 1.1rem; height: 1.1rem; }

/* ------------------------------------------------------------ formularios */
.ft-field { margin-bottom: 1.15rem; }

.ft-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ft-ink-soft);
}

.ft-input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ft-ink);
    background: var(--ft-glass-strong);
    border: 1px solid var(--ft-glass-border);
    border-radius: var(--ft-r-sm);
    outline: none;
    transition: border-color var(--ft-fast), box-shadow var(--ft-fast);
}

.ft-input::placeholder { color: var(--ft-ink-faint); }

.ft-input:focus {
    border-color: var(--ft-green);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ft-green) 18%, transparent);
}

.ft-input-group { position: relative; }

.ft-input-group .ft-input { padding-right: 3rem; }

.ft-input-affix {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: none;
    color: var(--ft-ink-faint);
    cursor: pointer;
    border-radius: 8px;
}

.ft-input-affix:hover { color: var(--ft-green); }
.ft-input-affix svg { width: 1.15rem; height: 1.15rem; }

/* --------------------------------------------------------------- chips */
.ft-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--ft-accent, var(--ft-green-deep));
    background: color-mix(in srgb, var(--ft-accent, var(--ft-green)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ft-accent, var(--ft-green)) 24%, transparent);
}

.ft-chip-ok      { --ft-accent: var(--ft-green); }
.ft-chip-wait    { --ft-accent: var(--ft-amber); }
.ft-chip-danger  { --ft-accent: var(--ft-coral); }
.ft-chip-info    { --ft-accent: var(--ft-aqua); }

/* Ponto a pulsar para estados "ao vivo" */
.ft-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: ft-pulse 2.4s var(--ft-ease) infinite;
}

@keyframes ft-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); }
    70%  { box-shadow: 0 0 0 0.55rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ------------------------------------------------------------- estrutura */
.ft-shell { max-width: 1360px; margin: 0 auto; padding: 0 1.5rem; }

.ft-grid { display: grid; gap: 1.25rem; }
.ft-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ft-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ft-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.ft-stack { display: flex; flex-direction: column; }
.ft-row { display: flex; align-items: center; }
.ft-between { justify-content: space-between; }
.ft-wrap { flex-wrap: wrap; }
.ft-gap-1 { gap: 0.5rem; }
.ft-gap-2 { gap: 1rem; }
.ft-gap-3 { gap: 1.5rem; }
.ft-gap-4 { gap: 2.5rem; }

.ft-section { padding: clamp(3rem, 8vw, 6rem) 0; }

/* ---------------------------------------------------------------- marca */
.ft-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
}

.ft-brand img { width: 34px; height: 34px; object-fit: contain; }

.ft-brand-name {
    font-family: var(--ft-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- navbar */
.ft-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ft-bg) 72%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid var(--ft-glass-border);
}

.ft-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4.25rem;
}

.ft-nav-links { display: flex; align-items: center; gap: 0.35rem; }

.ft-nav-link {
    padding: 0.5rem 0.9rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ft-ink-soft);
    text-decoration: none;
    border-radius: 999px;
    transition: color var(--ft-fast), background var(--ft-fast);
}

.ft-nav-link:hover { color: var(--ft-ink); background: var(--ft-glass); }
.ft-nav-link.is-active { color: var(--ft-green-deep); background: color-mix(in srgb, var(--ft-green) 12%, transparent); }

/* --------------------------------------------------------------- tabelas */
.ft-table-wrap {
    overflow-x: auto;
    border-radius: var(--ft-r);
}

.ft-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.ft-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ft-ink-soft);
    white-space: nowrap;
    border-bottom: 1px solid var(--ft-glass-border);
}

.ft-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ft-ink) 7%, transparent);
    vertical-align: middle;
}

.ft-table tbody tr { transition: background var(--ft-fast); }
.ft-table tbody tr:hover { background: color-mix(in srgb, var(--ft-green) 6%, transparent); }
.ft-table tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------- avatar */
.ft-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ft-glass-border);
    box-shadow: var(--ft-shadow-sm);
}

.ft-avatar-lg { width: 5.5rem; height: 5.5rem; }

/* ------------------------------------------------------------- animacao */
/* Entrada por revelacao: usada com o IntersectionObserver em ft-ui.js */
.ft-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--ft-slow), transform var(--ft-slow);
}

.ft-reveal.is-in { opacity: 1; transform: none; }

.ft-float { animation: ft-float 7s ease-in-out infinite; }

@keyframes ft-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

.ft-spin-slow { animation: ft-spin 26s linear infinite; }

@keyframes ft-spin {
    to { transform: rotate(360deg); }
}

/* Barra de progresso fina para "carregando" */
.ft-skeleton {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ft-ink) 6%, transparent) 25%,
        color-mix(in srgb, var(--ft-ink) 12%, transparent) 37%,
        color-mix(in srgb, var(--ft-ink) 6%, transparent) 63%);
    background-size: 400% 100%;
    animation: ft-shimmer 1.4s ease infinite;
    border-radius: var(--ft-r-sm);
}

@keyframes ft-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Quem pediu menos movimento nao leva nenhum. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ft-reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ utilitarios */
.ft-hide { display: none !important; }
.ft-center { text-align: center; }
.ft-mt-1 { margin-top: 0.5rem; }
.ft-mt-2 { margin-top: 1rem; }
.ft-mt-3 { margin-top: 1.5rem; }
.ft-mt-4 { margin-top: 2.5rem; }
.ft-mb-1 { margin-bottom: 0.5rem; }
.ft-mb-2 { margin-bottom: 1rem; }
.ft-mb-3 { margin-bottom: 1.5rem; }
.ft-mb-4 { margin-bottom: 2.5rem; }

/* -------------------------------------------------------------- telemovel */
@media (max-width: 768px) {
    :root { --ft-glass-blur: 12px; }

    .ft-nav-links { display: none; }
    .ft-shell { padding: 0 1rem; }
    .ft-card, .ft-stat { padding: 1.15rem; }
}

/* Android antigo: sem suporte de backdrop-filter, o vidro fica opaco em vez
   de transparente ilegivel. */
@supports not (backdrop-filter: blur(1px)) {
    .ft-glass, .ft-card, .ft-stat, .ft-nav, .ft-btn-ghost {
        background: var(--ft-glass-strong);
    }
}

/* ---------------------------------------------------------- seta do botão */
/* A seta desliza para a direita ao passar o rato e roda enquanto carrega.
   Vive aqui (e não no CSS de autenticação) porque a landing e a área
   aplicacional também a usam. */
.btn-arrow .btn-arrow-icon {
    transition: transform 220ms var(--ft-ease);
}

.btn-arrow:hover .btn-arrow-icon { transform: translateX(4px); }
.btn-arrow:active .btn-arrow-icon { transform: translateX(1px); }

.btn-arrow.is-loading .btn-arrow-icon {
    animation: ft-spin 0.9s linear infinite;
    transform: none;
}