/*
 * AI/R brand portal-wide overlay.
 * Scoped under body[data-theme="air"] so it only activates when the user
 * opts in via the Settings panel. Light and Dark modes (data-theme="" or
 * absent) see zero style changes from this file.
 *
 * Consumes tokens from air-tokens.css.
 * Cascade order: bootstrap.min.css → app.min.css → air-tokens.css → air-theme.css (last wins).
 */

/* ============================================================
   Foundation — typography + Bootstrap CSS var remap
   ============================================================ */

body[data-theme="air"] {
    /* Color remap — Bootstrap → air tokens */
    --bs-primary: var(--air-black);
    --bs-secondary: var(--air-gray-700);
    --bs-body-bg: var(--air-white);
    --bs-body-color: var(--air-gray-800);
    --bs-border-color: var(--air-border-color);
    --bs-link-color: var(--air-accent-revenue);
    --bs-link-hover-color: var(--air-black);

    /* Semantic accents — soft air pill tones */
    --bs-success: var(--air-pill-active-fg);
    --bs-warning: var(--air-pill-paused-fg);
    --bs-danger: var(--air-accent-danger);
    --bs-info: #1F4F8B;

    /* Typography */
    font-family: var(--air-font-body);
    color: var(--air-gray-800);
    background: var(--air-white);
}

body[data-theme="air"] h1,
body[data-theme="air"] h2,
body[data-theme="air"] h3,
body[data-theme="air"] h4,
body[data-theme="air"] h5,
body[data-theme="air"] h6,
body[data-theme="air"] .card-title {
    font-family: var(--air-font-body);
    font-weight: 600;
    color: var(--air-black);
}

body[data-theme="air"] code,
body[data-theme="air"] kbd,
body[data-theme="air"] pre,
body[data-theme="air"] samp,
body[data-theme="air"] .text-mono {
    font-family: var(--air-font-mono);
}

/* ============================================================
   Structure — cards, tables, forms
   ============================================================ */

/* Cards */
body[data-theme="air"] .card {
    background: var(--air-white);
    border: 1px solid var(--air-border-color);
    border-radius: var(--air-radius-lg);
    box-shadow: none;
}
body[data-theme="air"] .card-header {
    background: var(--air-white);
    border-bottom: 1px solid var(--air-border-color);
    padding: 14px 18px;
}
body[data-theme="air"] .card-header .card-title,
body[data-theme="air"] .card-header h4.card-title,
body[data-theme="air"] .card-header h5.card-title {
    font-family: var(--air-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--air-black);
    margin: 0;
}
body[data-theme="air"] .card-body { padding: 16px 18px; }
body[data-theme="air"] .card-footer {
    background: var(--air-gray-50);
    border-top: 1px solid var(--air-border-color);
    padding: 10px 18px;
    font-size: 13px;
    color: var(--air-gray-800);
}

/* Tables */
body[data-theme="air"] table.table {
    font-family: var(--air-font-body);
    font-size: 13px;
    color: var(--air-gray-800);
    margin-bottom: 0;
    border-color: var(--air-gray-100);
}
body[data-theme="air"] table.table > thead > tr > th,
body[data-theme="air"] table.table thead th {
    background: var(--air-gray-50);
    color: var(--air-gray-800);
    font-family: var(--air-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--air-border-color);
    padding: 10px 12px;
}
body[data-theme="air"] table.table > tbody > tr > td {
    padding: 8px 12px;
    border-color: var(--air-gray-100);
    vertical-align: middle;
}
body[data-theme="air"] table.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--air-gray-50);
    --bs-table-accent-bg: transparent;
}
body[data-theme="air"] table.table.table-hover > tbody > tr:hover > * {
    background-color: var(--air-gray-100);
    --bs-table-accent-bg: transparent;
}

/* Forms */
body[data-theme="air"] .form-label {
    font-family: var(--air-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--air-gray-700);
    font-weight: 500;
    margin-bottom: 6px;
}
body[data-theme="air"] .form-control,
body[data-theme="air"] .form-select,
body[data-theme="air"] input[type="text"],
body[data-theme="air"] input[type="email"],
body[data-theme="air"] input[type="password"],
body[data-theme="air"] input[type="number"],
body[data-theme="air"] input[type="date"],
body[data-theme="air"] textarea {
    border: 1px solid var(--air-gray-300);
    border-radius: var(--air-radius-sm);
    font-family: var(--air-font-body);
    font-size: 13px;
    color: var(--air-black);
    background: var(--air-white);
    /* NOTE: padding intentionally NOT set here — overriding it would break
       absolute-positioned search icons (.sidebar-search-icon, .projects-search-icon,
       .search-icon) that rely on the input's existing padding-left to leave space. */
}
body[data-theme="air"] .form-control:focus,
body[data-theme="air"] .form-select:focus,
body[data-theme="air"] input:focus,
body[data-theme="air"] textarea:focus {
    border-color: var(--air-black);
    box-shadow: 0 0 0 2px var(--air-gray-200);
    outline: none;
}
body[data-theme="air"] .form-text,
body[data-theme="air"] small.text-muted {
    color: var(--air-gray-700);
    font-size: 12px;
}
body[data-theme="air"] .text-danger,
body[data-theme="air"] .invalid-feedback {
    color: var(--air-accent-danger);
    font-size: 12px;
}
body[data-theme="air"] .is-invalid {
    border-color: var(--air-accent-danger) !important;
}
body[data-theme="air"] .form-check-label {
    font-size: 13px;
    color: var(--air-gray-800);
}

/* ============================================================
   Components — buttons, badges, alerts
   ============================================================ */

/* Buttons */
body[data-theme="air"] .btn-primary {
    background: var(--air-black);
    border-color: var(--air-black);
    color: var(--air-white);
    font-family: var(--air-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 6px 14px;
}
body[data-theme="air"] .btn-primary:hover,
body[data-theme="air"] .btn-primary:focus {
    background: var(--air-gray-800);
    border-color: var(--air-gray-800);
    color: var(--air-white);
}
body[data-theme="air"] .btn-outline-secondary,
body[data-theme="air"] .btn-outline-primary {
    border-color: var(--air-gray-400);
    color: var(--air-gray-800);
    background: transparent;
    font-family: var(--air-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
}
body[data-theme="air"] .btn-outline-secondary:hover,
body[data-theme="air"] .btn-outline-primary:hover {
    background: var(--air-gray-50);
    color: var(--air-black);
}
body[data-theme="air"] .btn-soft-primary,
body[data-theme="air"] .btn-soft-info,
body[data-theme="air"] .btn-soft-success,
body[data-theme="air"] .btn-soft-warning,
body[data-theme="air"] .btn-soft-danger {
    background: var(--air-gray-50);
    color: var(--air-gray-800);
    border: 1px solid var(--air-gray-300);
}
body[data-theme="air"] .btn-soft-primary:hover,
body[data-theme="air"] .btn-soft-info:hover,
body[data-theme="air"] .btn-soft-success:hover,
body[data-theme="air"] .btn-soft-warning:hover,
body[data-theme="air"] .btn-soft-danger:hover {
    background: var(--air-gray-100);
    color: var(--air-black);
    border-color: var(--air-gray-400);
}
body[data-theme="air"] .btn-sm { font-size: 11px; padding: 4px 8px; }

/* Badges */
body[data-theme="air"] .badge {
    font-family: var(--air-font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
}
body[data-theme="air"] .badge.bg-warning,
body[data-theme="air"] .badge.bg-warning.text-dark {
    background: var(--air-pill-paused-bg) !important;
    color: var(--air-pill-paused-fg) !important;
}
body[data-theme="air"] .badge.bg-info,
body[data-theme="air"] .badge.bg-info.text-dark {
    background: #DCE7F5 !important;
    color: #1F4F8B !important;
}
body[data-theme="air"] .badge.bg-secondary {
    background: var(--air-gray-200) !important;
    color: var(--air-gray-800) !important;
}
body[data-theme="air"] .badge.bg-primary {
    background: var(--air-gray-100) !important;
    color: var(--air-black) !important;
    border: 1px solid var(--air-gray-400);
}
body[data-theme="air"] .badge.bg-danger {
    background: var(--air-pill-cancel-bg) !important;
    color: var(--air-pill-cancel-fg) !important;
}
body[data-theme="air"] .badge.bg-success {
    background: var(--air-pill-active-bg) !important;
    color: var(--air-pill-active-fg) !important;
}
body[data-theme="air"] .badge.bg-dark {
    background: var(--air-black) !important;
    color: var(--air-white) !important;
}
body[data-theme="air"] .badge.bg-light {
    background: var(--air-gray-50) !important;
    color: var(--air-gray-800) !important;
    border: 1px solid var(--air-gray-300);
}

/* Alerts — same semantic mapping, larger surface */
body[data-theme="air"] .alert {
    border-radius: var(--air-radius-md);
    font-family: var(--air-font-body);
    font-size: 13px;
    padding: 10px 14px;
}
body[data-theme="air"] .alert-warning {
    background: var(--air-pill-paused-bg);
    border: 1px solid var(--air-pill-paused-fg);
    color: var(--air-pill-paused-fg);
}
body[data-theme="air"] .alert-danger {
    background: var(--air-pill-cancel-bg);
    border: 1px solid var(--air-pill-cancel-fg);
    color: var(--air-pill-cancel-fg);
}
body[data-theme="air"] .alert-success {
    background: var(--air-pill-active-bg);
    border: 1px solid var(--air-pill-active-fg);
    color: var(--air-pill-active-fg);
}
body[data-theme="air"] .alert-info {
    background: #DCE7F5;
    border: 1px solid #1F4F8B;
    color: #1F4F8B;
}

/* ============================================================
   Navigation — topbar, dropdowns, breadcrumb, pagination, sidebar
   ============================================================ */

/* Topbar */
body[data-theme="air"] #page-topbar {
    background: var(--air-white);
    border-bottom: 1px solid var(--air-border-color);
}
body[data-theme="air"] .navbar-header,
body[data-theme="air"] .header-item {
    font-family: var(--air-font-body);
    color: var(--air-gray-800);
}
body[data-theme="air"] .header-item:hover {
    background: var(--air-gray-50);
    color: var(--air-black);
}

/* Dropdowns */
body[data-theme="air"] .dropdown-menu {
    background: var(--air-white);
    border: 1px solid var(--air-border-color);
    border-radius: var(--air-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    padding: 4px 0;
}
body[data-theme="air"] .dropdown-item {
    font-family: var(--air-font-body);
    font-size: 13px;
    color: var(--air-gray-800);
    padding: 6px 14px;
}
body[data-theme="air"] .dropdown-item:hover,
body[data-theme="air"] .dropdown-item:focus {
    background: var(--air-gray-50);
    color: var(--air-black);
}
body[data-theme="air"] .dropdown-divider {
    border-color: var(--air-gray-100);
    margin: 4px 0;
}

/* Breadcrumb */
body[data-theme="air"] .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 12px;
    font-family: var(--air-font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body[data-theme="air"] .breadcrumb-item,
body[data-theme="air"] .breadcrumb-item a {
    color: var(--air-gray-700);
    text-decoration: none;
}
body[data-theme="air"] .breadcrumb-item.active {
    color: var(--air-black);
}
body[data-theme="air"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--air-gray-400);
}

/* Pagination */
body[data-theme="air"] .pagination .page-link {
    border-color: var(--air-gray-300);
    color: var(--air-gray-800);
    background: var(--air-white);
    font-family: var(--air-font-mono);
    font-size: 12px;
    padding: 6px 12px;
}
body[data-theme="air"] .pagination .page-link:hover {
    background: var(--air-gray-50);
    color: var(--air-black);
    border-color: var(--air-gray-400);
}
body[data-theme="air"] .pagination .page-item.active .page-link {
    background: var(--air-black);
    border-color: var(--air-black);
    color: var(--air-white);
}
body[data-theme="air"] .pagination .page-item.disabled .page-link {
    color: var(--air-gray-400);
    background: var(--air-gray-50);
}

/* Sidebar refinement (in Air Mode only — stays dark) */
body[data-theme="air"] .vertical-menu .menu-title {
    font-family: var(--air-font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
body[data-theme="air"] #sidebar-menu a {
    font-family: var(--air-font-body);
}
body[data-theme="air"] #sidebar-menu li a:hover {
    background: rgba(255,255,255,0.04);
}

/* ============================================================
   Air Mode brand identity — pure black sidebar + AI/R | J logo
   ============================================================ */

/* Hide air logo by default — only shown in Air Mode.
   Uses :not() + !important to beat Velzon's higher-specificity rules. */
body:not([data-theme="air"]) .navbar-brand-box .logo.logo-air,
body:not([data-theme="air"]) .logo.logo-air {
    display: none !important;
}

/* In Air Mode: hide Velzon Light/Dark logos, show AI/R logo */
body[data-theme="air"] .navbar-brand-box .logo.logo-light,
body[data-theme="air"] .navbar-brand-box .logo.logo-dark {
    display: none !important;
}
body[data-theme="air"] .navbar-brand-box .logo.logo-air {
    display: block !important;
}
body[data-theme="air"] .logo.logo-air .logo-lg img {
    object-fit: contain;
    /* Tight crop in the source image — display at natural ratio.
       Height is set by the inline HTML attribute (40px) so the image
       can render at brand-aligned proportions inside the 250px brand box. */
}

/* Pure AI/R black on the sidebar surface — Air Mode only */
body[data-theme="air"] .vertical-menu,
body[data-theme="air"] .navbar-brand-box {
    background: var(--air-black) !important;
}
body[data-theme="air"] .vertical-menu .menu-title {
    color: var(--air-gray-400);
}
body[data-theme="air"] #sidebar-menu > ul > li > a {
    color: var(--air-gray-200);
}
body[data-theme="air"] #sidebar-menu > ul > li > a:hover,
body[data-theme="air"] #sidebar-menu > ul > li.mm-active > a,
body[data-theme="air"] #sidebar-menu > ul > li > a.active {
    color: var(--air-white);
    background: rgba(255,255,255,0.06);
}
body[data-theme="air"] #sidebar-menu .sub-menu li a {
    color: var(--air-gray-300);
}
body[data-theme="air"] #sidebar-menu .sub-menu li a:hover,
body[data-theme="air"] #sidebar-menu .sub-menu li a.active {
    color: var(--air-white);
}

/* Sidebar quick search — keep existing sidebar.search.css styles intact in
   Air Mode. The wrapper already provides a dark background with a 1px
   border + the lupa icon is absolute-positioned over the input padding.
   Overriding the input with another bg+border created a visual overlap
   with the icon. We only need a thin contrast adjustment on the wrapper. */
body[data-theme="air"] .sidebar-search-input-wrapper {
    background-color: rgba(255,255,255,0.04);
}

/* ============================================================
   Defensive table normalization
   Forces tables to render with light bg + dark text in Air Mode,
   regardless of any inherited Velzon dark-mode rules. !important
   used liberally because page-specific CSS files (financial-table,
   etc.) often have their own high-specificity rules.
   ============================================================ */

body[data-theme="air"] .table,
body[data-theme="air"] table.table,
body[data-theme="air"] .financial-table,
body[data-theme="air"] table.financial-table {
    background: var(--air-white) !important;
    color: var(--air-gray-800) !important;
    --bs-table-bg: var(--air-white) !important;
    --bs-table-color: var(--air-gray-800) !important;
    --bs-table-striped-bg: var(--air-gray-50) !important;
    --bs-table-hover-bg: var(--air-gray-100) !important;
}
body[data-theme="air"] .table > thead > tr > th,
body[data-theme="air"] .table thead th,
body[data-theme="air"] .financial-table > thead > tr > th,
body[data-theme="air"] .financial-table thead th {
    background: var(--air-gray-50) !important;
    color: var(--air-gray-800) !important;
}
body[data-theme="air"] .table > tbody > tr > td,
body[data-theme="air"] .table tbody td,
body[data-theme="air"] .financial-table > tbody > tr > td,
body[data-theme="air"] .financial-table tbody td {
    background: var(--air-white) !important;
    color: var(--air-gray-800) !important;
    border-color: var(--air-gray-100) !important;
}
/* Keep semantic highlights from financial-project-detail.css visible */
body[data-theme="air"] .financial-table td.gross-margin-positive {
    background: var(--air-pill-active-bg) !important;
    color: var(--air-pill-active-fg) !important;
}
body[data-theme="air"] .financial-table td.gross-margin-negative {
    background: var(--air-pill-cancel-bg) !important;
    color: var(--air-pill-cancel-fg) !important;
}
body[data-theme="air"] .financial-table td.dif-no-faturamento {
    background: var(--air-pill-paused-bg) !important;
    color: var(--air-pill-paused-fg) !important;
}