/* ==========================================================================
   Supervisorio — Brand stylesheet
   Loaded AFTER Bootstrap 5.3.3 CDN so the custom properties below override
   the framework defaults. Keep this file framework-agnostic: no Sass, no
   PostCSS — only vanilla CSS custom properties and selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand tokens (Fertitex Agro)
   -------------------------------------------------------------------------- */
:root {
    --brand-green: #006833;
    --brand-green-soft: #AEC1A1;
    --brand-gray: #3C434A;
    --brand-brown: #9E5A3C;
    --brand-orange: #E27F20;

    --brand-green-rgb: 0, 104, 51;
    --brand-orange-rgb: 226, 127, 32;
    --brand-gray-rgb: 60, 67, 74;

    /* Surface colors */
    --surface-base: #FAFBF9;
    --surface-card: #FFFFFF;
    --surface-muted: #F1F3EE;

    --header-height: 64px;
}

/* --------------------------------------------------------------------------
   Bootstrap overrides
   Re-map Bootstrap's CSS variables so utilities like btn-primary, text-primary,
   bg-primary, link-primary and form focus rings automatically use the brand
   palette.
   -------------------------------------------------------------------------- */
:root {
    --bs-primary: var(--brand-green);
    --bs-primary-rgb: var(--brand-green-rgb);
    --bs-secondary: var(--brand-gray);
    --bs-secondary-rgb: var(--brand-gray-rgb);
    --bs-body-bg: var(--surface-base);
    --bs-body-color: var(--brand-gray);
    --bs-link-color: var(--brand-green);
    --bs-link-hover-color: #00461F;
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.4rem;
    --bs-border-radius-lg: 0.85rem;
}

/* Bootstrap evaluates these tokens once on load; re-declare the derived
   primary helpers so background / border / focus utilities pick the brand. */
.btn-primary {
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: #00582B;
    --bs-btn-hover-border-color: #00582B;
    --bs-btn-active-bg: #00461F;
    --bs-btn-active-border-color: #00461F;
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-active-bg: var(--brand-green);
    --bs-btn-active-border-color: var(--brand-green);
}

.btn-warning {
    --bs-btn-bg: var(--brand-orange);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-bg: #C76A14;
    --bs-btn-hover-border-color: #C76A14;
    --bs-btn-active-bg: #A85B11;
    --bs-btn-active-border-color: #A85B11;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-active-color: #FFFFFF;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-green-rgb), 0.15);
}

.page-link {
    color: var(--brand-green);
}

.page-item.active .page-link {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Brand utilities
   -------------------------------------------------------------------------- */
.bg-brand-gradient {
    background: linear-gradient(135deg, var(--brand-green) 0%, #00461F 100%);
    color: #FFFFFF;
}

.text-brand-green {
    color: var(--brand-green) !important;
}

.text-brand-gray {
    color: var(--brand-gray) !important;
}

.text-brand-orange {
    color: var(--brand-orange) !important;
}

.bg-brand-green {
    background-color: var(--brand-green) !important;
    color: #FFFFFF;
}

.bg-brand-soft {
    background-color: var(--brand-green-soft) !important;
}

.border-brand-green {
    border-color: var(--brand-green) !important;
}

/* --------------------------------------------------------------------------
   Layout (authenticated)
   -------------------------------------------------------------------------- */
body {
    background-image: url("../img/background.f441cb0f0ffd.png");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    background-color: transparent;
}

aside.app-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background-color: var(--brand-green);
    border-right: none;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
}

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

.app-content {
    flex: 1 1 auto;
    padding: 1.5rem;
}

@media (max-width: 991.98px) {
    aside.app-sidebar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--header-height);
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.sidebar-brand img {
    max-height: 36px;
    width: auto;
}

.sidebar-brand-name {
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0.02em;
}

.sidebar-section-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    padding: 1rem 1.25rem 0.4rem;
    margin: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem 1rem;
    gap: 0.3rem;
    flex: 1 1 auto;
    overflow-y: auto;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.925rem;
    line-height: 1.2;
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.55);
    width: 1.25rem;
    text-align: center;
}

.sidebar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}

.sidebar-nav .nav-link:hover i {
    color: #FFFFFF;
}

.sidebar-nav .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-weight: 600;
}

.sidebar-nav .nav-link.active i {
    color: #FFFFFF;
}

.sidebar-nav .nav-link.disabled,
.sidebar-nav .nav-link[aria-disabled='true'] {
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* Mobile offcanvas reuses the same styles */
.offcanvas .sidebar-nav .nav-link {
    font-size: 1rem;
}

.offcanvas.app-sidebar .offcanvas-header {
    background-color: var(--brand-green);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.offcanvas.app-sidebar .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas.app-sidebar .offcanvas-title {
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.app-navbar {
    background-color: var(--brand-green);
    border-bottom: none;
    height: var(--header-height);
    flex-shrink: 0;
}

.app-navbar .page-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
}

.app-navbar .btn-outline-secondary {
    --bs-btn-color: rgba(255, 255, 255, 0.85);
    --bs-btn-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.55);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.55);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--brand-green);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #FFFFFF !important;
}

.user-dropdown-toggle::after {
    margin-left: 0.25rem;
}

.user-dropdown-meta {
    text-align: left;
    line-height: 1.1;
}

.user-dropdown-meta .name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #FFFFFF;
}

.user-dropdown-meta .email {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 575.98px) {
    .user-dropdown-meta {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Cards, tables, footer
   -------------------------------------------------------------------------- */
.card {
    border-color: #E5E7E2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.table thead {
    background-color: #F4F6F2;
}

.app-footer {
    background-color: #FFFFFF;
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 1.5rem;
    color: #6C757D;
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--brand-green);
    background-image: linear-gradient(rgba(0, 30, 14, 0.55), rgba(0, 30, 14, 0.55)),
        var(--auth-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background-color: #FFFFFF;
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
    padding: 2rem 2rem 1.75rem;
}

.auth-brand {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-brand img {
    max-height: 64px;
    width: auto;
}

.auth-brand .tagline {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6C757D;
}

.empty-state i {
    font-size: 3rem;
    color: var(--brand-green-soft);
    display: block;
    margin-bottom: 0.75rem;
}

.empty-state h2 {
    font-size: 1.1rem;
    color: var(--brand-gray);
    margin-bottom: 0.25rem;
}

.empty-state p {
    margin: 0;
    font-size: 0.925rem;
}

/* --------------------------------------------------------------------------
   Sidebar collapse toggle (seção Cadastros)
   -------------------------------------------------------------------------- */
.sidebar-collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: none;
    border: none;
    padding: 0.55rem 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    text-align: left;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.925rem;
    line-height: 1.2;
    cursor: pointer;
}

.sidebar-collapse-toggle i:first-child {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.55);
    width: 1.25rem;
    text-align: center;
}

.sidebar-collapse-toggle:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}

.sidebar-collapse-toggle:hover i:first-child {
    color: #FFFFFF;
}

.sidebar-collapse-toggle:not(.collapsed) {
    color: #FFFFFF;
    font-weight: 600;
}

.sidebar-collapse-toggle:not(.collapsed) i:first-child {
    color: #FFFFFF;
}

.sidebar-chevron {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-collapse-toggle:not(.collapsed) .sidebar-chevron {
    transform: rotate(-180deg);
    color: rgba(255, 255, 255, 0.8);
}

.sidebar-collapse-sub {
    font-size: 0.85rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   Dashboard — stat columns with responsive dividers
   -------------------------------------------------------------------------- */
.dashboard-stat-col {
    border-top: 1px solid var(--bs-border-color);
}

@media (min-width: 576px) {
    .dashboard-stat-col {
        border-top: none;
        border-right: 1px solid var(--bs-border-color);
    }

    .dashboard-stat-col--last {
        border-right: none;
    }
}

.dashboard-stat-col:first-child {
    border-top: none;
}

/* --------------------------------------------------------------------------
   Tom Select — ajustes de marca (autocomplete FK)
   O tema tom-select.bootstrap5 já provê a base; estas regras apenas alinham
   bordas, foco e seleção ativa com a paleta Fertitex.
   -------------------------------------------------------------------------- */
.ts-wrapper.form-select {
    padding: 0;
}

.ts-control {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper:focus-within .ts-control {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-green-rgb), 0.2);
    outline: 0;
}

.ts-dropdown .active {
    background-color: var(--brand-green) !important;
    color: #fff !important;
}

/* --------------------------------------------------------------------------
   Utilitários adicionais de marca
   -------------------------------------------------------------------------- */

/* Cor de texto suave (ícones de estado vazio, destaques secundários) */
.text-brand-green-soft {
    color: var(--brand-green-soft) !important;
}

/* --------------------------------------------------------------------------
   Mensagens flash — espaçamento interno
   -------------------------------------------------------------------------- */
.messages-container {
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Relatórios — contêiner de gráfico Chart.js (Sprint 11)
   Chart.js com maintainAspectRatio: false (ver static/js/reports_charts.js)
   depende inteiramente da altura CSS do elemento pai do <canvas>. Sem um
   contêiner com altura fixa, o canvas e o pai entram em loop de resize
   infinito. Envolva sempre o <canvas> em ".chart-container".
   -------------------------------------------------------------------------- */
.chart-container {
    position: relative;
    height: 320px;
}

@media (max-width: 768px) {
    .chart-container {
        height: 240px;
    }
}

/* --------------------------------------------------------------------------
   Importação Excel — área de arraste-e-solte do arquivo (Sprint 10)
   Envolve o <input type="file"> nativo (mantido no DOM, apenas reposicionado
   via JS em templates/imports/job_form.html) para acessibilidade e
   compatibilidade com o POST do form. O input fica transparente e cobre toda
   a área (drag/drop e clique nativos do browser), com z-index acima do
   conteúdo visual; o botão de remover arquivo selecionado fica um nível acima
   do input para continuar clicável.
   -------------------------------------------------------------------------- */
.file-dropzone {
    position: relative;
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.file-dropzone:hover,
.file-dropzone.is-dragover {
    border-color: var(--brand-green);
    background-color: rgba(0, 104, 51, .06);
}

.file-dropzone.is-invalid {
    border-color: var(--bs-danger);
}

.file-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-dropzone #clear-file-btn {
    position: relative;
    z-index: 3;
}