/* ============================================================
 * legital — design tokens + base styles
 * Fontes servidas localmente (sem Google Fonts CDN).
 * ============================================================ */

/* ---------- Fonts (local woff2) ---------- */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/static/fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
    --c-brand: #7C3AED;
    --c-brand-hover: #6D28D9;
    --c-brand-soft: #F1EBFF;

    --c-surface-base: #FAFAFB;
    --c-surface-raised: #FFFFFF;
    --c-surface-overlay: #FFFFFF;
    --c-surface-hover: #F1EFF6;
    --c-surface-sunken: #F5F3FA;

    --c-border-subtle: #E4E1ED;
    --c-border-strong: #C9C5D6;

    --c-text-primary: #2C2640;
    --c-text-secondary: #56506B;
    --c-text-tertiary: #8B859E;

    --c-success: #10B981;
    --c-warning: #F59E0B;
    --c-danger: #F43F5E;
    --c-info: #0EA5E9;
}

.dark {
    --c-brand: #7C3AED;
    --c-brand-hover: #8B5CF6;
    --c-brand-soft: rgba(124, 58, 237, 0.16);

    --c-surface-base: #0B0910;
    --c-surface-raised: #13111A;
    --c-surface-overlay: #1C1A26;
    --c-surface-hover: #1C1A26;
    --c-surface-sunken: #08060D;

    --c-border-subtle: #2A2735;
    --c-border-strong: #3D3949;

    --c-text-primary: #E8E6EF;
    --c-text-secondary: #A8A4B8;
    --c-text-tertiary: #6E6A7E;
}

/* ---------- Base ---------- */
html, body {
    font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
    background: var(--c-surface-base);
    color: var(--c-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Hide native search clear button (Chrome shows extra ✕) ---------- */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
            appearance: none;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--c-border-subtle);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-border-strong); }

/* ---------- Drop zone ---------- */
.drop-zone {
    border: 2px dashed var(--c-border-subtle);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--c-brand);
    background: var(--c-brand-soft);
}

/* ---------- Page thumbnails ---------- */
.page-thumb {
    transition: border-color 0.15s ease;
    cursor: pointer;
    position: relative;
}
/* Reserva A4 portrait (1 / 1.414) antes do <img> carregar.
   Sem isso, com loading="lazy", thumbs vazios tem altura 0 e o scroll
   da busca aterrissa onde já carregou em vez de na página-alvo. */
.page-thumb img {
    aspect-ratio: 1 / 1.414;
    width: 100%;
    background: var(--c-surface-sunken);
}
.page-thumb.selected {
    border-color: var(--c-brand);
}
.page-thumb .check-overlay {
    position: absolute;
    right: 8px;
    bottom: 30px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--c-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.page-thumb.selected .check-overlay {
    opacity: 1;
    transform: scale(1);
}

/* Flash de localização — pulso amarelo curto que aparece após o scroll
   chegar no destino. Variantes:
     .flash-locate-bbox = div absoluto inserido sobre a região exata do título
                          (usado quando a bbox do heading está disponível)
     .flash-locate     = fallback no thumbnail inteiro quando não há bbox
   pointer-events:none mantém o click de seleção funcional durante a animação. */
.flash-locate-bbox {
    position: absolute;
    background: var(--c-warning);
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    border-radius: 3px;
    animation: flash-locate 1.4s ease-out;
}
.page-thumb.flash-locate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-warning);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    animation: flash-locate 1.4s ease-out;
}
@keyframes flash-locate {
    0%   { opacity: 0; }
    15%  { opacity: 0.62; }
    55%  { opacity: 0.40; }
    100% { opacity: 0; }
}

/* ---------- Progress bar ---------- */
.progress-bar-fill {
    transition: width 0.4s ease;
}

/* ---------- Log viewer ---------- */
.log-viewer {
    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.55;
}

/* ---------- Modal backdrop (no glassmorphism / no blur) ---------- */
.modal-backdrop {
    background: rgba(11, 9, 16, 0.55);
}
.dark .modal-backdrop {
    background: rgba(0, 0, 0, 0.65);
}

/* ---------- Animations (subtle, no bounce / no scale) ---------- */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.fade-in {
    animation: fade-in 0.25s ease-out;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.pulse-soft {
    animation: pulse-soft 1.6s ease-in-out infinite;
}

/* ---------- Table ---------- */
.results-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--c-surface-raised);
    border-bottom: 1px solid var(--c-border-subtle);
}

/* ---------- Semantic panels (left-border, neutral surface) ---------- */
.panel-warn   { border-left: 3px solid var(--c-warning); }
.panel-danger { border-left: 3px solid var(--c-danger); }
.panel-info   { border-left: 3px solid var(--c-info); }

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--c-brand);
    color: #fff;
}
.btn-primary:hover:not(:disabled) {
    background: var(--c-brand-hover);
}
.btn-neutral {
    background: var(--c-surface-hover);
    color: var(--c-text-primary);
}
.btn-neutral:hover:not(:disabled) {
    background: var(--c-border-subtle);
}
.btn-success {
    background: var(--c-success);
    color: #fff;
}
.btn-success:hover:not(:disabled) {
    filter: brightness(0.92);
}
.btn-danger-soft {
    background: transparent;
    color: var(--c-danger);
    border: 1px solid var(--c-border-subtle);
}
.btn-danger-soft:hover:not(:disabled) {
    background: var(--c-surface-hover);
    border-color: var(--c-danger);
}

/* ---------- Status pills (neutral + colored dot) ---------- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    background: var(--c-surface-hover);
    color: var(--c-text-primary);
    border: 1px solid var(--c-border-subtle);
    line-height: 1.4;
}
.dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
}
.dot-success { background: var(--c-success); }
.dot-warning { background: var(--c-warning); }
.dot-danger  { background: var(--c-danger); }
.dot-info    { background: var(--c-info); }
.dot-neutral { background: var(--c-text-tertiary); }

/* ---------- Utility ---------- */
.tnum { font-variant-numeric: tabular-nums; }

kbd {
    font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace;
    padding: 2px 5px;
    border: 1px solid var(--c-border-subtle);
    background: var(--c-surface-hover);
    border-radius: 4px;
    color: var(--c-text-secondary);
}

/* ---------- Focus ring (consistent across all interactive elements) ---------- */
:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline-offset: 2px;
}

/* ---------- Range slider (crop preview) ---------- */
input[type="range"].accent-brand {
    accent-color: var(--c-brand);
}