/* ============================================================
   DROPZYS2 - Main Stylesheet
   Based on AdScraper2 design system
   ============================================================ */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
img, a, svg, button {
    -webkit-user-drag: none;
    user-drag: none;
}

html {
    overflow-x: hidden;
    max-width: 100%;
    background-color: #fafafa;
}

body {
    font-family: "Montserrat", sans-serif;
    background-color: #fafafa;
    color: #3c3c3c;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
}

body > .pages-container {
    flex: 1 0 auto;
    width: 100%;
    align-self: stretch;
}

body > .footer {
    flex-shrink: 0;
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */

.header {
    background: #fafafa;
    padding: 0px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    height: 120px;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.header.header-centered { justify-content: center; }

.header-logo-group.header-logo-centered { align-items: center; }

.h1_logo.h1_logo-login {
    margin: 0;
    font-family: 'BBH Bartle', sans-serif;
    font-weight: 400;
}

.h1_logo-link,
.h1_logo-link:hover,
.h1_logo-link:active,
.h1_logo-link.filter-counter-active {
    text-decoration: none;
    color: inherit;
    background: none !important;
    border: none !important;
    transform: none !important;
    transition: none !important;
    padding: 0 !important;
    height: auto !important;
}

.header * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.header-logo-group {
    display: flex;
    flex-direction: column;
}

.header-logo-group a {
    display: block;
    line-height: 1;
}

.h1_logo {
    font-size: 40px;
    font-weight: 500;
    color: #3c3c3c;
    letter-spacing: -0.3px;
    cursor: pointer;
}

.logo_img {
    height: 66px;
    min-height: 50px;
    display: block;
    margin-bottom: 2px;
}

.header-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
}

.header-welcome {
    color: #9a9a9a;
    text-align: right;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.2px;
    margin: 0;
    line-height: 1.2;
}

.header-subtitle {
    font-size: 15px;
    color: #3c3c3c;
    font-weight: 400;
    letter-spacing: -0.2px;
    margin: 0;
    line-height: 1.2;
}

.header-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.header-buttons * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* ============================================================
   CATEGORY MENU / FILTERS MENU
   ============================================================ */

.category-menu {
    background: #FFF;
    padding: 24px 32px;
    display: flex;
    gap: 12px;
}

.filters-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* ─── Barra da janela de senha admin (SudoBar) ──────────────────────────────
   Espelha a .bd-loading dos telões, com cor âmbar: trilho #fff7cd,
   preenchimento #face68. Preenchida = janela cheia / proteção
   estática; encolhendo = tempo restante da janela sudo. Só renderiza para
   quem tem capability de escrita. */
.sudo-bar {
    height: 10px;
    width: 100%;
    background: #fff7cd;
    overflow: hidden;
    flex: 0 0 auto;
}
.sudo-bar-fill {
    height: 100%;
    width: 0;              /* nasce VAZIA — nunca pisca cheia antes do JS medir a janela */
    background: #face68;
    /* sem transition CSS: o JS controla a largura por frame (contagem suave) */
}
/* Modo com janela (contagem regressiva) mantém o mesmo preenchimento âmbar */
.sudo-bar.sudo-bar-windowed .sudo-bar-fill {
    background: #face68;
}
/* Janela quase no fim: pulso de atenção (sem mudar a cor base) */
.sudo-bar-fill.sudo-bar-ending {
    animation: sudoBarPulse 1.1s ease-in-out infinite;
}
@keyframes sudoBarPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.filters-menu-left {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.filters-menu-center {
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.filters-menu-right {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.filters-menu-right .header-buttons {
    gap: 12px;
}

/* Breadcrumb */
.breadcrumb-bar {
    background: #FFF;
    border: 2px dashed #e0e0e0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #3c3c3c;
    margin-bottom: 32px;
    height: 54px;
    box-sizing: border-box;
}

.breadcrumb-bar .breadcrumb-item a,
.breadcrumb-bar .breadcrumb-item a:link,
.breadcrumb-bar .breadcrumb-item a:visited,
.breadcrumb-bar .breadcrumb-item a.filter-counter-active {
    color: #555;
    background: none;
    border: none;
    text-decoration: none;
}

.breadcrumb-bar .breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-bar .breadcrumb-sep {
    color: #aaa;
    font-size: 15px;
    line-height: 1;
}

.breadcrumb-bar .breadcrumb-current {
    color: #222;
    font-weight: 500;
}

/* ============================================================
   FILTER COUNTER
   ============================================================ */

.filter-counter {
    padding: 25px 30px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    text-transform: uppercase;
    text-decoration: none;
    color: #3c3c3c;
    font-size: 16px;
    font-weight: 600;
    height: 54px;
    transition: all 0.15s ease;
    text-align: center;
    cursor: pointer;
    line-height: 0px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    box-sizing: border-box;
}

.filter-counter:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border: 2px dashed #91d5ff;
}

.filter-counter:active {
    transform: translateY(0);
}

.filter-counter.active,
.filter-counter-active {
    background: #e6f7ff;
    border-color: #91d5ff;
}

.filter-counter.active:hover,
.filter-counter-active:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border-color: #91d5ff;
}

.filter-counter.active:active,
.filter-counter-active:active {
    transform: translateY(0);
}

.table-action-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-filter-btn {
    padding: 25px 30px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    font-size: 13px;
    font-weight: 600;
    height: 54px;
    transition: all 0.15s ease;
    text-align: center;
    cursor: pointer;
    line-height: 0px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    box-sizing: border-box;
}

.table-filter-btn:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border: 2px dashed #91d5ff;
}

.table-filter-btn:active {
    transform: translateY(0);
}

.table-filter-btn.active {
    background: #e6f7ff;
    border-color: #91d5ff;
}

.table-filter-btn.active:hover {
    transform: translateY(-2px);
}

.table-filter-btn.active:active {
    transform: translateY(0);
}

.table-filter-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-filter-btn-disabled:hover {
    transform: none;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
}

/* ============================================================
   SEARCH INPUT
   ============================================================ */

.search-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-input {
    padding-right: 44px;
}

.search-input {
    width: 100%;
    padding: 10px 16px;
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    
    font-size: 16px !important;
    color: #3c3c3c;
    font-size: 20px;
    font-weight: 500;
    height: 54px;
    transition: all 0.15s ease;
    font-family: inherit;
    outline: none;
    user-select: text;
    -webkit-user-select: text;
}

.search-input::placeholder {
    color: #9a9a9a;
    font-weight: 500;
}


.search-clear-btn {
    position: absolute;
    right: 5px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9a9a9a;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin-right: 6px;
}

.search-clear-btn:hover {
    color: #3c3c3c;
    background: #ececec;
}

.search-clear-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* ============================================================
   VIEW BTN
   ============================================================ */

.view-btn {
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    padding: 4px;
    cursor: pointer;
    color: #3c3c3c;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 54px;
    width: 54px;
}

.view-btn:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border-color: #91d5ff;
}

.view-btn:active {
    transform: translateY(0);
}

.view-btn.active {
    background: #e6f7ff !important;
    border-color: #91d5ff !important;
    color: #3c3c3c !important;
}

.view-btn svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* ============================================================
   CATEGORY BTN
   ============================================================ */

.category-btn {
    padding: 25px 50px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #3c3c3c;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.category-btn svg {
    flex-shrink: 0;
    pointer-events: none;
}

.category-btn span {
    pointer-events: none;
}

.category-btn:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border: 2px dashed #91d5ff;
}

.category-btn:active {
    transform: translateY(0);
}

.category-btn.botao_top {
    background: #fafafa;
    border-color: #e0e0e0;
    color: #3c3c3c;
}

.category-btn.botao_top:hover {
    background: #ececec;
}

.category-btn.botao_top.logout-btn:hover {
    background-color: #ffe0e0;
    border-color: #ffb0b0;
    color: #d32f2f;
}

/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.btn-green {
    padding: 25px 30px;
    background: #ebffcf;
    border: 2px dashed #a5ee70;
    
    color: #08662e;
    font-size: 16px;
    font-weight: 600;
    transition: background 500ms ease-in-out, border 500ms ease-in-out, color 500ms ease-in-out, transform 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.btn-green:hover {
    transform: translateY(-2px);
    background: #d6ffb3;
    border-color: #38a169;
}

.btn-green:active {
    transform: translateY(0);
}

.btn-orange {
    padding: 25px 50px;
    background: #fff7e0;
    border: 2px dashed #f6ad55;
    
    color: #92400e;
    font-size: 16px;
    font-weight: 600;
    transition: background 500ms ease-in-out, border 500ms ease-in-out, color 500ms ease-in-out, transform 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.btn-orange:hover {
    transform: translateY(-2px);
    background: #ffe9b3;
    border-color: #ed8936;
}

.btn-orange:active {
    transform: translateY(0);
}

.btn-edit {
    padding: 25px 50px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    
    color: #666;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.btn-edit:hover {
    transform: translateY(-2px);
    background: #fff9e6;
    border-color: #ffe58f;
    color: #8b7500;
}

.btn-edit:active {
    transform: translateY(0);
}

.btn-trash {
    padding: 25px 50px;
    background: #f0f0f0;
    border: 2px dashed #ccc;
    
    color: #666;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.btn-trash:hover {
    transform: translateY(-2px);
    background: #ffe0e0;
    border-color: #ffb0b0;
    color: #d32f2f;
}

.btn-trash:active {
    transform: translateY(0);
}

.btn-gray {
    padding: 25px 50px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #3c3c3c;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.btn-gray:hover {
    background: #ececec;
    border: 2px dashed #bababa;
}

.btn-yellow {
    padding: 25px 50px;
    background: #FFF1F1;
    border: 2px dashed #E9B3FB;
    
    color: #5d4864;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 12px;
}

.btn-yellow:hover {
    background: #EBD6FB;
    border-color: #7F55B1;
}

/* ============================================================
   PAGES CONTAINER & HEADER ACTIONS
   ============================================================ */

.pages-container {
    padding: 32px;
    max-width: 2560px;
    margin: 0 auto;
}

.pages-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.results-counter {
    font-size: 15px;
    color: #9a9a9a;
    font-weight: 400;
}

.pagination-dropdown {
    position: relative;
}

.pagination-btn.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
}

.pagination-btn.dropdown-toggle:hover {
    background: #ececec;
    border: 2px dashed #bababa;
}

.pagination-btn.dropdown-toggle svg {
    margin-right: -4px;
    transition: transform 0.15s ease;
}

.pagination-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #ffffff;
    border: 2px dashed #3c3c3c;
    
    min-width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 100;
    overflow: hidden;
}

.pagination-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pagination-dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 16px;
    color: #3c3c3c;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    cursor: pointer;
}

.pagination-dropdown-menu .dropdown-item:hover {
    background: #ececec;
}

.pagination-dropdown-menu .dropdown-item.active {
    background: #3c3c3c;
    color: #fff;
}

.pagination-wrapper {
    display: flex;
    gap: 16px;
    align-items: center;
}
.pagination-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ============================================================
   PAGINATION BUTTONS
   ============================================================ */

.pagination-btn {
    padding: 25px 30px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #3c3c3c;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    cursor: pointer;
    height: 54px;
    line-height: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    min-width: 54px;
}

.pagination-btn:hover:not(.disabled):not(.current) {
    background: #ececec;
    border: 2px dashed #bababa;
}

.pagination-btn.current {
    background: #e6f7ff;
    border-color: #91d5ff;
    cursor: default;
}

.pagination-btn.current.single {
    background: #fafafa !important;
    color: #3c3c3c !important;
    border: 2px dashed #e0e0e0 !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.4;
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   BANNER: DECOLAGENS VAZIAS
   ============================================================ */

.empty-takeoffs-banner.banner-muted {
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    opacity: 0.4;
    margin-top: 0;
}

.empty-takeoffs-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fff9e6;
    border: 2px dashed #f6ad55;
    color: #8b7500;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}

.empty-takeoffs-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.empty-takeoffs-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.empty-takeoffs-title {
    font-weight: 600;
}

.empty-takeoffs-link {
    cursor: pointer;
}

.waiting-takeoffs-banner.banner-muted {
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    opacity: 0.4;
    margin-top: 0;
}

.waiting-takeoffs-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fff9e6;
    border: 2px dashed #f6ad55;
    color: #8b7500;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}

.waiting-takeoffs-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.waiting-takeoffs-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.waiting-takeoffs-title {
    font-weight: 600;
}

.waiting-takeoffs-link {
    cursor: pointer;
}

.future-takeoffs-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fff9e6;
    border: 2px dashed #f6ad55;
    color: #8b7500;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}

.future-takeoffs-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.future-takeoffs-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.future-takeoffs-title {
    font-weight: 600;
}

.future-takeoffs-link {
    cursor: pointer;
}

.expired-license-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fff0f0;
    border: 2px dashed #ffb0b0;
    color: #d32f2f;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}

.expired-license-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.expired-license-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expired-license-title {
    font-weight: 600;
}

.expired-license-link {
    cursor: pointer;
}

/* Banner subsequente (irmão posterior de qualquer outro banner): 16px */
.hangar-overdue-banner,
.fuel-overdue-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fff0f0;
    border: 2px dashed #ffb0b0;
    color: #d32f2f;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}
.hangar-overdue-icon,
.fuel-overdue-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}
.hangar-overdue-text,
.fuel-overdue-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hangar-overdue-title,
.fuel-overdue-title {
    font-weight: 600;
}
.hangar-overdue-link,
.fuel-overdue-link {
    cursor: pointer;
}

.partners-overdue-banner,
.profits-overdue-banner,
.charges-overdue-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fff0f0;
    border: 2px dashed #ffb0b0;
    color: #d32f2f;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}
.partners-overdue-icon, .profits-overdue-icon, .charges-overdue-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}
.partners-overdue-text, .profits-overdue-text, .charges-overdue-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.partners-overdue-title, .profits-overdue-title, .charges-overdue-title {
    font-weight: 600;
}
.partners-overdue-link, .profits-overdue-link, .charges-overdue-link {
    cursor: pointer;
}
.empty-takeoffs-banner ~ .partners-overdue-banner,
.empty-takeoffs-banner ~ .profits-overdue-banner,
.empty-takeoffs-banner ~ .charges-overdue-banner,
.waiting-takeoffs-banner ~ .partners-overdue-banner,
.waiting-takeoffs-banner ~ .profits-overdue-banner,
.waiting-takeoffs-banner ~ .charges-overdue-banner,
.future-takeoffs-banner ~ .partners-overdue-banner,
.future-takeoffs-banner ~ .profits-overdue-banner,
.future-takeoffs-banner ~ .charges-overdue-banner,
.expired-license-banner ~ .partners-overdue-banner,
.expired-license-banner ~ .profits-overdue-banner,
.expired-license-banner ~ .charges-overdue-banner,
.hangar-overdue-banner ~ .partners-overdue-banner,
.hangar-overdue-banner ~ .profits-overdue-banner,
.hangar-overdue-banner ~ .charges-overdue-banner,
.fuel-overdue-banner ~ .partners-overdue-banner,
.fuel-overdue-banner ~ .profits-overdue-banner,
.fuel-overdue-banner ~ .charges-overdue-banner,
.partners-overdue-banner ~ .profits-overdue-banner,
.partners-overdue-banner ~ .charges-overdue-banner,
.profits-overdue-banner ~ .partners-overdue-banner,
.profits-overdue-banner ~ .charges-overdue-banner,
.charges-overdue-banner ~ .partners-overdue-banner,
.charges-overdue-banner ~ .profits-overdue-banner,
.partners-overdue-banner ~ .empty-takeoffs-banner,
.partners-overdue-banner ~ .waiting-takeoffs-banner,
.partners-overdue-banner ~ .future-takeoffs-banner,
.partners-overdue-banner ~ .expired-license-banner,
.partners-overdue-banner ~ .hangar-overdue-banner,
.partners-overdue-banner ~ .fuel-overdue-banner,
.profits-overdue-banner ~ .empty-takeoffs-banner,
.profits-overdue-banner ~ .waiting-takeoffs-banner,
.profits-overdue-banner ~ .future-takeoffs-banner,
.profits-overdue-banner ~ .expired-license-banner,
.profits-overdue-banner ~ .hangar-overdue-banner,
.profits-overdue-banner ~ .fuel-overdue-banner,
.charges-overdue-banner ~ .empty-takeoffs-banner,
.charges-overdue-banner ~ .waiting-takeoffs-banner,
.charges-overdue-banner ~ .future-takeoffs-banner,
.charges-overdue-banner ~ .expired-license-banner,
.charges-overdue-banner ~ .hangar-overdue-banner,
.charges-overdue-banner ~ .fuel-overdue-banner {
    margin-top: 16px;
}

.empty-takeoffs-banner   ~ .waiting-takeoffs-banner,
.empty-takeoffs-banner   ~ .future-takeoffs-banner,
.empty-takeoffs-banner   ~ .expired-license-banner,
.empty-takeoffs-banner   ~ .hangar-overdue-banner,
.empty-takeoffs-banner   ~ .fuel-overdue-banner,
.waiting-takeoffs-banner ~ .empty-takeoffs-banner,
.waiting-takeoffs-banner ~ .future-takeoffs-banner,
.waiting-takeoffs-banner ~ .expired-license-banner,
.waiting-takeoffs-banner ~ .hangar-overdue-banner,
.waiting-takeoffs-banner ~ .fuel-overdue-banner,
.future-takeoffs-banner  ~ .empty-takeoffs-banner,
.future-takeoffs-banner  ~ .waiting-takeoffs-banner,
.future-takeoffs-banner  ~ .expired-license-banner,
.future-takeoffs-banner  ~ .hangar-overdue-banner,
.future-takeoffs-banner  ~ .fuel-overdue-banner,
.expired-license-banner  ~ .empty-takeoffs-banner,
.expired-license-banner  ~ .waiting-takeoffs-banner,
.expired-license-banner  ~ .future-takeoffs-banner,
.expired-license-banner  ~ .hangar-overdue-banner,
.expired-license-banner  ~ .fuel-overdue-banner,
.hangar-overdue-banner   ~ .empty-takeoffs-banner,
.hangar-overdue-banner   ~ .waiting-takeoffs-banner,
.hangar-overdue-banner   ~ .future-takeoffs-banner,
.hangar-overdue-banner   ~ .expired-license-banner,
.hangar-overdue-banner   ~ .fuel-overdue-banner,
.fuel-overdue-banner     ~ .empty-takeoffs-banner,
.fuel-overdue-banner     ~ .waiting-takeoffs-banner,
.fuel-overdue-banner     ~ .future-takeoffs-banner,
.fuel-overdue-banner     ~ .expired-license-banner,
.fuel-overdue-banner     ~ .hangar-overdue-banner {
    margin-top: 16px;
}

.no-takeoffs-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    padding: 14px 18px;
    width: 100%;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
}

.no-takeoffs-banner.has-banners-above {
    margin-top: 16px;
}

.no-takeoffs-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

.no-takeoffs-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.no-takeoffs-title {
    font-weight: 600;
}

.no-takeoffs-link {
    cursor: pointer;
}

.no-slots-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    width: 100%;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    font-size: 16px;
    font-weight: 400;
    border-radius: 0;
    box-sizing: border-box;
    margin-top: 8px;
}

.no-slots-banner svg {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
}

/* ============================================================
   CARDS GRID
   ============================================================ */

.pages-grid {
    margin-top: 32px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pages-grid:not(.masonry-ready) {
    visibility: hidden;
}

.pages-grid.pages-grid-empty {
    margin-top: 16px;
}

.pages-grid.pages-grid-hidden {
    display: none;
    margin-top: 0;
}

.masonry-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

@media (max-width: 1700px) { .pages-grid { flex-wrap: wrap; } }
@media (max-width: 1028px) {
    .pages-grid { flex-direction: column; align-items: center; }
    .pages-grid .masonry-col { width: 100%; max-width: 800px; }
}

/* ============================================================
   PAGE CARD
   ============================================================ */

.page-card {
    background: #ffffff;
    border: 0;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.2s ease-out;
    box-shadow: 0px 0px 19px -13px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 19px -13px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 19px -13px rgba(0,0,0,0.2);
}

.page-card:hover {
    transform: translate3d(0, -4px, 0);
}

.home-stat-card {
    height: 380px;
    padding-bottom: 16px !important;
}

.apexcharts-tooltip,
.apexcharts-tooltip-title {
    border-radius: 0 !important;
}

.apexcharts-svg,
.apexcharts-inner,
.apexcharts-plot-series {
    overflow: visible !important;
}


.page-card.status-off {
    border: 2px dashed #ffd6d6;
}

#settingsContainer .page-card {
    border: none;
}

#settingsContainer .pages-grid {
    margin-top: 0;
}

#settingsContainer .page-card .page-avatar-num {
    border: none !important;
    color: #333333 !important;
}

#settingsContainer .page-card .page-name {
    line-height: 1;
    margin-right: 0;
}

#settingsContainer .page-card .page-name-text {
    padding: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

#settingsContainer .page-card .page-name-text,
#settingsContainer .page-card .page-niche,
#settingsContainer .page-card .page-age,
#settingsContainer .page-card .tag-value {
    color: #333333 !important;
}
#settingsContainer .page-card .info2 .produto-btn-valor {
    border: 2px solid transparent;
    box-sizing: border-box;
}

#settingsContainer .page-card .badge-delete {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: #fff1f0;
    border: 2px dashed #ffd1d1;
    color: #a8071a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
#settingsContainer .page-card .badge-delete:not([disabled]):hover {
    background: #ffc8c8;
    border-color: #ff7d7d;
}
#settingsContainer .page-card .info2:has(.badge-delete:not([disabled]):hover) .produto-btn-valor,
#settingsContainer .page-card .info2:has(.badge-delete:not([disabled]):hover) .tag-value {
    background: #fff1f0 !important;
    border: 2px dashed #ffd1d1 !important;
    color: #a8071a !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.card-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: auto;
    overflow: visible;
    flex-shrink: 0;
}

.page-avatar {
    width: 75px;
    height: 75px;
    
    object-fit: cover;
    border: 2px dashed #e0e0e0;
    flex-shrink: 0;
    padding: 2px;
}

.page-avatar-num {
    width: 85px;
    height: 85px;

    border: none;
    background: #fafafa;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    color: #9a9a9a;
    letter-spacing: -0.5px;
}

.page-details {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: auto;
    min-height: 85px;
    overflow: visible;
}

.page-name {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: 40px;
    overflow: visible;
    min-width: 0;
    max-width: 100%;
}

.page-name-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: #9a9a9a;
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 1;
    min-width: 0;
    vertical-align: middle;
}

.page-name-btn:hover { color: #3c3c3c; }

.status-off .page-name-btn { color: #f56565; }
.status-off .page-name-btn:hover { color: #d32f2f; }

.category-track .page-name-btn,
.category-track .page-name-btn svg { color: #8b7500; }

.page-name-btn svg {
    fill: currentColor;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: none;
}
.card-show-link-icon .page-name-btn svg { display: inline-block; }
.page-card.card-show-link-icon .page-name-btn,
.page-card.card-show-link-icon .page-name-btn svg { color: #1a1a1a !important; cursor: pointer !important; }
.page-card.card-show-link-icon a.page-name-btn { text-decoration: none; }

.takeoff-card .page-name-btn svg,
.table-section-title .page-name-btn svg {
    display: inline-block !important;
    cursor: pointer !important;
}

.takeoff-card .page-name-btn {
    cursor: pointer !important;
}

.takeoff-card .page-name-text {
    padding: 0;
    margin: 0;
}

.page-name-text {
    display: inline-block;
    white-space: nowrap;
    transition: filter 500ms ease-in-out;
    flex-shrink: 0;
    padding: 8px 12px;
    margin: -8px -12px;
}

.page-niche {
    display: inline-block;
    width: fit-content;
    font-size: 15px;
    color: #9a9a9a;
    font-weight: 400;
    transition: color 0.15s ease;
}

.page-age {
    display: inline-block;
    width: fit-content;
    font-size: 15px;
    color: #9a9a9a;
    font-weight: 400;
    transition: color 0.15s ease;
}

.status-off .page-name { color: #f56565; }
.status-off .page-age  { color: #f56565; }

#settingsContainer .product-deleted .page-name-btn,
#settingsContainer .product-deleted .page-name-btn:hover { color: #e53e3e !important; font-weight: bold !important; }
#settingsContainer .product-deleted .page-niche,
#settingsContainer .product-deleted .page-niche span     { color: #e53e3e !important; font-weight: bold !important; }
#settingsContainer .product-deleted .page-name-text,
#settingsContainer .product-deleted .page-age            { color: #e53e3e !important; font-weight: bold !important; }

.category-track .page-niche,
.category-track .page-age { color: #8b7500; }

.staff-highlight { color: #48bb78; font-weight: bold; }

/* ============================================================
   RARITY BADGES
   ============================================================ */

.rarity-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    white-space: nowrap;
}

.rarity-mythic    { background:#fff9e6; border:2px dashed #ffe58f; color:#8b7500; }
.rarity-legendary { background:#fff9e6; border:2px dashed #ffe58f; color:#8b7500; }
.rarity-epic      { background:#f3e8ff; border:2px dashed #d8b4fe; color:#7c3aed; }
.rarity-rare      { background:#e6f7ff; border:2px dashed #91d5ff; color:#1a6fa8; }
.rarity-uncommon  { background:#ebffcf; border:2px dashed #48bb78; color:#08662e; }
.rarity-common    { background:#fafafa; border:2px dashed #e0e0e0; color:#9a9a9a; }

/* ============================================================
   STATUS INDICATOR
   ============================================================ */

.status-indicator {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-right: 8px;
    cursor: pointer;
}

/* Sem permissão para alterar o status desta linha: bolinha não-interativa
   (o onclick nem é renderizado). Visual IDÊNTICO ao normal — só não clica. */
.status-indicator-locked {
    cursor: default;
}

/* Variante da coluna Produto: MESMA caixa e respiro do indicador padrão.
   (As regras por-tabela mais abaixo só definem cores — a geometria é esta.) */
.status-indicator-product {
    position: relative;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-right: 8px;
}

.status-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-pulse {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.category-track .status-dot.on {
    background: #48bb78;
    animation: blink 2s ease-in-out infinite;
}

.category-track .status-pulse.on {
    border: 1px solid #48bb78;
    animation: pulse 2s ease-out infinite;
}

.page-card:not(.category-track):not(.status-off) .status-dot.on {
    background: #bababa;
    animation: none;
}

.page-card:not(.category-track):not(.status-off) .status-pulse.on {
    display: none;
}

.status-dot.off {
    background: #f56565;
    animation: blink 2s ease-in-out infinite;
}

.status-pulse.off {
    border: 1px solid #f56565;
    animation: pulse 2s ease-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

@keyframes pulse {
    0%   { transform: scale3d(1,   1,   1); opacity: 0.8; }
    50%  { transform: scale3d(1.6, 1.6, 1); opacity: 0.3; }
    100% { transform: scale3d(2.2, 2.2, 1); opacity: 0; }
}

/* ============================================================
   CARD FOOTER
   ============================================================ */

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #eee;
}

.footer-info {
    display: flex;
    align-items: center;
    width: 100%;
}

.ads-count {
    font-size: 25px;
    font-weight: 600;
    color: #3c3c3c;
    white-space: nowrap;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.ads-count:first-child  { padding-left: 0; margin-right: auto; justify-content: flex-start; }
.ads-count:nth-child(2) { margin-left: 8px; justify-content: flex-end; }
.ads-count:nth-child(3) { margin-left: 8px; justify-content: flex-end; }
.ads-count:nth-child(4) { margin-left: 8px; justify-content: flex-end; }
.ads-count:last-child   { padding-right: 0; justify-content: flex-end; }

.ads-label {
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    margin-left: 4px;
    position: relative;
    top: 2px;
}

.page-card:not(.category-track):not(.status-off) .ads-count {
    color: #9a9a9a;
    transition: color 0.15s ease;
}

.page-card:not(.category-track):not(.status-off) .ads-count:hover {
    color: #3c3c3c;
}

.category-track .ads-count { color: #48bb78; }
.status-off .ads-count     { color: #f56565; }

.stats_percent { font-size: 20px; }

.arrow_stats_down { margin-bottom: 2px; }

.stats-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   CARD FOOTER EXTRA (info1 / info2)
   ============================================================ */

.card-footer-extra {
    display: flex;
    gap: 16px;
    padding-top: 16px;
}

.card-footer-divider {
    width: 100%;
}

.card-footer-divider:has(~ .info2) {
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.card-footer-divider-thin {
    width: 100%;
    border-bottom: 1px solid #eee;
}

.yellow-btn {
    flex: 1;
    max-width: 100px;
    padding: 10px 18px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #9a9a9a;
    height: 38px;
    line-height: 15px;
    font-size: 15px;
    transition: all 0.2s ease;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}

.btn4 {
    flex: 1;
    padding: 0 18px;
    
    background: #fff;
    border: 2px dashed #e0e0e0;
    color: #9a9a9a;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    user-select: none;
    -webkit-user-select: none;
}

.tag-value {
    flex: 1;
    font-size: 15px;
    color: #9a9a9a;
    padding-left: 12px !important;
    padding-right: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 4px;
}

.category-track .btn4    { border-color: #ffe58f; color: #8b7500; }
.category-track .yellow-btn { border-color: #ffe58f; color: #8b7500; background: #fffbeb; }

.btn4.btn4-green {
    background: #ebffcf !important;
    border-color: #a5ee70 !important;
    color: #08662e !important;
}

.btn-partner-add {
    padding: 25px 30px;
    background: #ebffcf;
    border: 2px dashed #a5ee70;
    color: #08662e;
    font-size: 13px;
    font-weight: 600;
    height: 54px;
    transition: all 0.15s ease;
    text-align: center;
    cursor: pointer;
    line-height: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 10;
}
.btn-partner-add:hover {
    transform: translateY(-2px);
    background: #d6ffb3;
    border: 2px dashed #38a169;
}
.btn-partner-add.btn-partner-add-disabled {
    background: #f5f5f5 !important;
    border: 2px dashed #d9d9d9 !important;
    color: #bfbfbf !important;
    cursor: not-allowed;
}
.btn-partner-add.btn-partner-add-disabled:hover {
    transform: none;
}
.btn-partner-edit {
    padding: 25px 30px;
    background: #fff9e6;
    border: 2px dashed #ffe58f;
    color: #8b7500;
    font-size: 13px;
    font-weight: 600;
    height: 54px;
    transition: all 0.15s ease;
    text-align: center;
    cursor: pointer;
    line-height: 0px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 10;
}
.btn-partner-edit:hover {
    transform: translateY(-2px);
    background: #fff3cc;
    border: 2px dashed #f6ad55;
}
.btn-partner-disabled {
    background: #fafafa !important;
    border: 2px dashed #e0e0e0 !important;
    color: #bfbfbf !important;
    opacity: 0.4;
    cursor: not-allowed !important;
}
.btn-partner-disabled:hover {
    transform: none !important;
    background: #fafafa !important;
    border: 2px dashed #e0e0e0 !important;
    color: #bfbfbf !important;
}
.btn-partner-disabled:hover::after {
    opacity: 0 !important;
}

.btn4-edit {
    background: #fff9e6;
    border-color: #ffe58f;
    color: #8b7500;
}

/* Gray avatar/flag for WAIT cards */
.page-card:not(.category-track):not(.status-off) .page-avatar {
    filter: grayscale(100%);
    opacity: 0.7;
}

/* ============================================================
   CATEGORY RIBBON
   ============================================================ */

.category-ribbon {
    position: absolute;
    top: 12px;
    right: -34px;
    width: 140px;
    min-height: 38px;
    text-align: center;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 10;
    background: #e6f7ff;
    border: 2px dashed #91d5ff;
    overflow: hidden;
    color: #3a5566;
}

.category-ribbon .icon_ribbon {
    position: relative;
    z-index: 3;
}

.category-track .icon_ribbon {
    display: inline-block;
    position: relative;
    animation: blink 2s ease-in-out infinite;
}

.category-ribbon.track {
    background-color: #fff9e6;
    border-color: #ffe58f;
    color: #8b7500;
}

.product-ribbon {
    position: absolute;
    top: 12px;
    right: -34px;
    width: 140px;
    min-height: 38px;
    text-align: center;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 600;
    transform: rotate(45deg);
    z-index: 10;
    overflow: hidden;
}
.product-ribbon .icon_ribbon { position: relative; z-index: 3; }
.product-ribbon-open      { background: #ebffcf !important; border: 2px dashed #a5ee70 !important; color: #08662e !important; }
.product-ribbon-inuse     { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; }
.product-ribbon-delivered { background: #fff1f0; border: 2px dashed #ffa39e; color: #820014; }
.product-ribbon-empty     { background: #fafafa; border: 2px dashed #e0e0e0; }
.product-ribbon-income    { background: #ebffcf !important; border: 2px dashed #a5ee70 !important; color: #08662e !important; }
.product-ribbon-expense   { background: #ffebee !important; border: 2px dashed #ef9a9a !important; color: #7f0000 !important; }
.product-ribbon-user      { background: #f5f5f5; border: 2px dashed #bdbdbd; color: #616161; }
.product-ribbon-staff     { background: #fff8e1; border: 2px dashed #f6ad55; color: #7a4900; }
.product-ribbon-pilot     { background: #f3e8ff; border: 2px dashed #b57bee; color: #5b21b6; }

.status-off .category-ribbon {
    background-color: #ffe0e0;
    border-color: #ffb0b0;
    color: #d32f2f;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {
    .header {
        padding: 0 16px;
        height: 80px;
    }

    .category-menu {
        padding: 16px;
        flex-wrap: wrap;
    }

    .filters-menu {
        flex-wrap: wrap;
    }

    .filters-menu-center {
        order: 3;
        width: 100%;
        flex: unset;
    }

    .pages-container {
        padding: 16px;
    }

    .pages-header-actions {
        flex-wrap: wrap;
    }
}

/* ============================================================
   FORCE ALL CARDS GOLDEN (override wait/off grey/red styles)
   ============================================================ */


.page-card .page-name-btn,
.page-card .page-name-btn svg { color: #8b7500 !important; cursor: default; }

.page-card .page-niche,
.page-card .page-age { color: #8b7500 !important; }

#settingsContainer .page-card.hangar-card-income .page-avatar-num { background: #ebffcf !important; color: #08662e !important; }
#settingsContainer .page-card.hangar-card-expense .page-avatar-num { background: #ffe0e0 !important; color: #d32f2f !important; }

#settingsContainer .page-card.hangar-card-income .page-name-btn,
#settingsContainer .page-card.hangar-card-income .page-name-btn svg,
#settingsContainer .page-card.hangar-card-income .page-name-text,
#settingsContainer .page-card.hangar-card-income .page-name .arrow-up,
#settingsContainer .page-card.hangar-card-income .page-niche,
#settingsContainer .page-card.hangar-card-income .page-age { color: #2e7d32 !important; fill: #2e7d32 !important; font-weight: 600 !important; }

#settingsContainer .page-card.hangar-card-expense .page-name-btn,
#settingsContainer .page-card.hangar-card-expense .page-name-btn svg,
#settingsContainer .page-card.hangar-card-expense .page-name-text,
#settingsContainer .page-card.hangar-card-expense .page-name .arrow-down,
#settingsContainer .page-card.hangar-card-expense .page-niche,
#settingsContainer .page-card.hangar-card-expense .page-age { color: #c62828 !important; fill: #c62828 !important; font-weight: 600 !important; }

.page-card .ads-count { color: #48bb78 !important; }

.page-card .status-dot.on  { background: #e0e0e0 !important; animation: blink 2s ease-in-out infinite !important; }
.page-card .status-pulse.on { border: 1px solid #e0e0e0 !important; animation: pulse 2s ease-out infinite !important; display: block !important; }
.page-card .status-dot.off  { background: #48bb78 !important; animation: blink 2s ease-in-out infinite !important; }
.page-card .status-pulse.off { border: 1px solid #48bb78 !important; animation: pulse 2s ease-out infinite !important; }

.page-card .page-avatar-num { border: none !important; color: #8b7500 !important; }

.page-card .btn4:not(.btn4-disabled) { border-color: #ffe58f !important; color: #8b7500 !important; cursor: pointer; }
.page-card .btn4.btn4-green { background: #ebffcf !important; border-color: #a5ee70 !important; color: #08662e !important; }
.page-card .btn4.btn4-green:not(.btn4-disabled):hover { background: #d6ffb3 !important; border-color: #38a169 !important; }
.page-card .btn4.btn4-disabled { background: #fafafa !important; border-color: #e0e0e0 !important; color: #bfbfbf !important; opacity: 0.4 !important; cursor: not-allowed !important; }
.page-card .btn4.btn4-edit  { background: #fafafa !important; border-color: #e0e0e0 !important; color: #3c3c3c !important; }
.page-card .btn4.btn4-edit:hover { background: #e6f7ff !important; border-color: #91d5ff !important; color: #3c3c3c !important; }
.page-card .btn4.btn4-edit-disabled { background: #f5f5f5 !important; border-color: #d9d9d9 !important; color: #bfbfbf !important; cursor: not-allowed !important; pointer-events: none !important; }

.page-card .yellow-btn { border-color: #ffe58f !important; color: #8b7500 !important; background: #fffbeb !important; }

/* Botões fixos do bloco Produtos */
.produto-btn-valor {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 18px;
    background: #fafafa;
    border: 0px;
    
    color: #666666;
    height: 38px;
    line-height: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
.produto-btn-vagas {
    flex: 1;
    max-width: 100px;
    padding: 10px 18px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #666666;
    height: 38px;
    line-height: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
.page-card .tag-value  { color: #8b7500 !important; }

.page-card .category-ribbon { background: #fff9e6 !important; border-color: #ffe58f !important; color: #8b7500 !important; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
    background: #FFF;
    padding: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 160px;
}

.footer-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.footer-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.footer-copyright {
    font-size: 15px;
    color: #9a9a9a;
    font-weight: 400;
    letter-spacing: -0.2px;
    text-align: center;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-link {
    font-size: 14px;
    color: #9a9a9a;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
    cursor: pointer;
}

.footer-link:hover {
    color: #3c3c3c;
}

.footer-separator {
    color: #e0e0e0;
    font-size: 14px;
    user-select: none;
    margin-left: 10px;
    margin-right: 10px;
}

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo-img {
    height: 66px;
    min-height: 50px;
    display: block;
}

/* Footer Theme Dropdown */
.footer-theme-dropdown {
    position: relative;
    display: inline-block;
}

.footer-theme-btn {
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    
    padding: 10px 16px;
    font-size: 20px;
    font-weight: 600;
    color: #3c3c3c;
    cursor: pointer;
    display: flex;
    width: 302px;
    text-align: center;
    align-items: center;
    transition: all 0.15s ease;
    letter-spacing: -0.2px;
    min-width: 140px;
    justify-content: center;
    gap: 4px;
}

.footer-theme-btn:hover {
    background: #fafafa;
    border-color: #d0d0d0;
}

.footer-theme-btn svg {
    stroke: #3c3c3c;
    flex-shrink: 0;
}

.footer-theme-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    background: #ffffff;
    border: 2px dashed #3c3c3c;
    
    min-width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.footer-theme-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.footer-theme-menu .dropdown-item {
    display: block;
    padding: 10px 16px;
    font-size: 20px;
    color: #3c3c3c;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    letter-spacing: -0.2px;
    user-select: none;
    text-align: center;
}

.footer-theme-menu .dropdown-item:hover {
    background: #ececec;
}

.footer-theme-menu .dropdown-item.active {
    background: #3c3c3c;
    color: #FFF;
}

@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        min-height: auto;
        padding: 24px;
    }

    .footer-left {
        width: 100%;
    }

    .footer-right {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .footer-logo-img {
        height: 50px;
    }
}

@media (max-width: 500px) {
    .footer {
        padding: 20px 16px;
        gap: 20px;
    }

    .footer-logo-img {
        height: 40px;
    }

    .footer-copyright {
        font-size: 13px;
    }

    .footer-link {
        font-size: 13px;
    }

    .footer-separator {
        font-size: 12px;
    }

    .footer-theme-btn {
        padding: 8px 12px;
        font-size: 16px;
        min-width: 110px;
        width: auto;
    }

    .footer-theme-btn svg {
        width: 16px;
        height: 16px;
    }

    .footer-theme-menu .dropdown-item {
        font-size: 16px;
        padding: 8px 12px;
    }
}

.page-card:not(.category-track):not(.status-off) .page-avatar { filter: none !important; opacity: 1 !important; }

/* ============================================================
   TABLE LIST VIEW
   ============================================================ */

.table-section-title {
    width: 100%;
    background: #FFF;
    color: #3c3c3c;
    font-size: 20px;
    font-weight: 600;
    height: 64px;
    line-height: 44px;
    padding-bottom: 16px;
}

/* Ícone de ajuda ao lado do título das tabelas (i-table-help):
   cinza em repouso, escurece no hover com fade (padrão do sistema). */
.table-help-icon {
    vertical-align: middle;
    flex-shrink: 0;
    margin-left: 8px;
    margin-top: -4px;
    color: #333;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.table-help-icon:hover { opacity: 1; }

.pages-list-table {
    background: #ffffff;
    overflow-x: visible;
    margin-top: 32px;
    padding: 32px;
    box-shadow: 0px 0px 19px -13px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 19px -13px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 19px -13px rgba(0,0,0,0.2);
}

.pages-list-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff;
    box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2);
}

.pages-table {
    border-collapse: collapse;
    background: #ffffff;
}

.pages-table thead tr {
    background: #fafafa;
    border-bottom: none;
}

.pages-table thead th {
    padding: 16px 20px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #3c3c3c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    white-space: nowrap;
    display: table-cell !important;
    cursor: default;
    transition: all 0.15s ease;
    background-color: #fafafa !important;
}


.pages-table tbody tr.table-row {
    transition: background 0.15s ease, opacity 0.15s ease;
    position: relative;
}

.pages-table tbody tr.table-row td {
    border-bottom: 1px solid #eee;
}

.pages-table tbody tr.table-row:not(.category-track):not(.status-off) {
    opacity: 1;
}

.pages-table tbody tr.table-row:not(.category-track):not(.status-off):hover {
    opacity: 1;
}

.pages-table tbody tr.table-row:not(.category-track):hover {
    background: #fafafa;
}

.pages-table tbody tr.table-row.category-track:hover td {
    background: #fff9e6 !important;
}

.pages-table tbody tr.table-row:not(.category-track):not(:has(.table-checkbox.selected)):hover td:not(.check-col):not(.actions-col) {
    background: #fafafa !important;
}

/* Venda deletada (is_deleted): row inteira com fundo destacado, em todas as tds.
   !important + especificidade alta para vencer o zebra (.col-stripe) e o hover. */
.pages-table tbody tr.table-row.sale-deleted td,
.pages-table tbody tr.table-row.sale-deleted:hover td,
.pages-table tbody tr.table-row.sale-deleted:not(.category-track):not(:has(.table-checkbox.selected)):hover td:not(.check-col):not(.actions-col) {
    background: #FFF5F5 !important;
}

/* Cor da fonte de toda a row deletada (inclui textos dentro de wrappers/spans),
   exceto a coluna de Ações — cujos ícones mantêm o cinza padrão. */
.pages-table tbody tr.table-row.sale-deleted,
.pages-table tbody tr.table-row.sale-deleted td:not(.actions-col),
.pages-table tbody tr.table-row.sale-deleted td:not(.actions-col) * {
    color: #d32f2f !important;
}

/* Na row deletada, os badges de Vagas e Desconto usam sempre o visual vermelho
   (.slots-done), independente do status/cor original. Cobre as colunas de vagas
   das tabelas de vendas (slots) e de compras (pur-slots), e a de desconto. */
.pages-table tbody tr.table-row.sale-deleted td[data-column="slots"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="pur-slots"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="discount"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="prod-alturas"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="benefit-alturas"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="upc-alturas"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="payment_status"] .rarity-badge-table,
.pages-table tbody tr.table-row.sale-deleted td[data-column="combustivel"] .rarity-badge-table {
    background: #ffe0e0 !important;
    border-color: #ffb0b0 !important;
    color: #d32f2f !important;
}

/* Na row deletada, os ícones de ação mantêm o cinza padrão (não o vermelho da
   row). View e Edit recebem .btn-disabled no JS (cursor proibido + sem clique,
   via TableCheck); apenas o "abrir" (link <a>) permanece ativo. */
.pages-table tbody tr.table-row.sale-deleted td.actions-col .td-action-btn {
    color: #9a9a9a !important;
}
.pages-table tbody tr.table-row.sale-deleted td.actions-col .td-action-btn svg {
    color: #9a9a9a !important;
}

/* Na row deletada, as setas de transação (Entrada/Saída) usam fill vermelho,
   sobrepondo o verde/vermelho fixos de .arrow-up/.arrow-down (que são fill, não
   color, e por isso não herdam o vermelho da row). */
.pages-table tbody tr.table-row.sale-deleted td[data-column="transaction_type"] .arrow-up,
.pages-table tbody tr.table-row.sale-deleted td[data-column="transaction_type"] .arrow-down,
.pages-table tbody tr.table-row.sale-deleted td[data-column="transacao"] .arrow-up,
.pages-table tbody tr.table-row.sale-deleted td[data-column="transacao"] .arrow-down {
    fill: #d32f2f !important;
}

/* A borda de seleção (checkbox marcado) das rows deletadas é vermelha em vez
   de azul — aplicada pelo TableCheck (updateBorders), que usa #d32f2f quando a
   row tem .sale-deleted, preservando o 'transparent' entre rows adjacentes. */

.pages-table tbody tr.table-row:last-child {
    border-bottom: none;
}

.pages-table tbody tr.table-row.category-track {
    border: 2px dashed #ffe58f;
}

.pages-table tbody tr.table-row.category-track td:nth-child(even) {
    background-color: #fffbeb !important;
}

.pages-table tbody tr.table-row.category-track td:nth-child(1) {
    background-color: #fffbeb !important;
}

.pages-table tbody tr.table-row.category-track td.td-tags {
    background-color: #fff !important;
}

.pages-table tbody tr.table-row.category-track .table-name,
.pages-table tbody tr.table-row.category-track .table-list,
.pages-table tbody tr.table-row.category-track .table-age,
.pages-table tbody tr.table-row.category-track .table-niche,
.pages-table tbody tr.table-row.category-track .table-category {
    color: #8b7500 !important;
}

.pages-table tbody tr.table-row.category-track td {
    font-weight: 600 !important;
}

.pages-table tbody td {
    padding: 0px 20px;
    height: 69px;
    box-sizing: border-box;
    vertical-align: middle;
    transition: background 0.15s ease;
}

.pages-table tbody td:nth-child(odd):not(.check-col):not(.actions-col) {
    background-color: #fdfdfd;
}

.pages-table tbody td:nth-child(even):not(.check-col):not(.actions-col) {
    background-color: #ffffff;
}

.pages-table tbody td:nth-child(1):not(.check-col):not(.actions-col) {
    background-color: #fdfdfd;
}

.pages-table tbody td.td-tags {
    background-color: #fff !important;
}

.table-row.status-off {
    border: 2px dashed #ffd6d6;
    background: #fff5f5;
}

.table-row.status-off:hover {
    background: #ffe5e5;
}

/* Columns */
.th-list, .td-list { text-align: center !important; }
.table-list { font-size: 14px; color: #3c3c3c; font-weight: 400; transition: color 0.2s ease; }
.table-name-wrapper { display: flex; align-items: center; gap: 12px; }
.table-avatar-circle { width: 40px; height: 40px;  object-fit: cover; flex-shrink: 0; }
.members-table .empty-dash,
.planes-table .empty-dash { font-weight: 600; }
/* ── members ── 70+130+140+150+130+350+150+110+100+155+200+255+80+115+200+300 = 2635 */
.members-table th[data-column="registered"],
.members-table td[data-column="registered"] { text-align: center; }

/* ── alerts-members-table (página alerts — apenas usuários com licença expirada; mesma estrutura da members-table) ── */
.alerts-members-table th[data-column="registered"],
.alerts-members-table td[data-column="registered"] { text-align: center; }

/* ── alerts-empty-table / alerts-future-table (página alerts — decolagens pendentes e futuras) ── */
.alerts-empty-table th[data-column="data"], .alerts-future-table th[data-column="data"],
.alerts-empty-table td[data-column="data"], .alerts-future-table td[data-column="data"]               { text-align: center; }
.alerts-empty-table th[data-column="status"], .alerts-future-table th[data-column="status"]           { text-align: center; }
.alerts-empty-table th[data-column="takeoff_num"], .alerts-future-table th[data-column="takeoff_num"],
.alerts-empty-table td[data-column="takeoff_num"], .alerts-future-table td[data-column="takeoff_num"] { text-align: center; }
.alerts-empty-table th[data-column="slots"], .alerts-future-table th[data-column="slots"],
.alerts-empty-table td[data-column="slots"], .alerts-future-table td[data-column="slots"]             { text-align: center; }
.alerts-empty-table th[data-column="altitude"], .alerts-future-table th[data-column="altitude"],
.alerts-empty-table td[data-column="altitude"], .alerts-future-table td[data-column="altitude"]       { text-align: center; }
.alerts-empty-table td[data-column="notes"] .table-niche-ellipsis,
.alerts-planes-table td[data-column="notes"] .table-niche-ellipsis,
.alerts-fuel-table td[data-column="notes"] .table-niche-ellipsis,
.planes-table td[data-column="notes"] .table-niche-ellipsis,
.planes-fuel-table td[data-column="notes"] .table-niche-ellipsis,
.aircraft-fuel-table td[data-column="notes"] .table-niche-ellipsis,
.finances-all-invoices-table td[data-column="notes"] .table-niche-ellipsis,
.finances-payments-table td[data-column="notes"] .table-niche-ellipsis,
.finances-categories-table td[data-column="notes"] .table-niche-ellipsis,
.finances-invoices-table td[data-column="notes"] .table-niche-ellipsis,
.main-takeoffs-table td[data-column="observacoes"] .table-niche-ellipsis,
.products-table td[data-column="prod-notes"] .table-niche-ellipsis,
.alerts-future-table td[data-column="notes"] .table-niche-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerts-empty-table th[data-column="created_at"], .alerts-future-table th[data-column="created_at"],
.alerts-empty-table td[data-column="created_at"], .alerts-future-table td[data-column="created_at"]   { text-align: center; }
.alerts-empty-table th[data-column="updated_at"], .alerts-future-table th[data-column="updated_at"],
.alerts-empty-table td[data-column="updated_at"], .alerts-future-table td[data-column="updated_at"]   { text-align: center; }

/* ── sales ── 100+70+200+315+210+105+130+140+210+260+260+350+220+200+220+160 = 3150 */
/* originSalesTable tem comission=320, product=280, discount=160, soma diferente */
#originSalesTable th[data-column="discount"],
#originSalesTable td[data-column="discount"] { text-align: center; }
/* ── user-partner-comissions ── 70+200+150+90+160+280+200+160+200+200+240+200+240+200+240 = 2830 + check+actions ~100 = 2930 */
.user-partner-comissions-table.fixed-tds { table-layout: auto; }
.user-partner-comissions-table [data-column="upc-alturas"] { white-space: nowrap; }
.user-partner-comissions-table th[data-column="date"],
.user-partner-comissions-table td[data-column="date"]           { text-align: center; }
.user-partner-comissions-table th[data-column="status"],
.user-partner-comissions-table td[data-column="status"]         { text-align: center; }
.user-partner-comissions-table th[data-column="quantity"],
.user-partner-comissions-table td[data-column="quantity"]       { text-align: center; }
.user-partner-comissions-table th[data-column="value"],
.user-partner-comissions-table td[data-column="value"]          { text-align: center; }
.user-partner-comissions-table th[data-column="product"],
.user-partner-comissions-table td[data-column="product"]        { text-align: left !important; }
.user-partner-comissions-table th[data-column="product_price"],
.user-partner-comissions-table td[data-column="product_price"]  { text-align: center; }
.user-partner-comissions-table th[data-column="benefit"],
.user-partner-comissions-table td[data-column="benefit"]        { text-align: center; }
.user-partner-comissions-table th[data-column="paid_at"],
.user-partner-comissions-table td[data-column="paid_at"]        { text-align: center; }
.user-partner-comissions-table th[data-column="created_at"],
.user-partner-comissions-table td[data-column="created_at"]     { text-align: center; }
.user-partner-comissions-table th[data-column="updated_at"],
.user-partner-comissions-table td[data-column="updated_at"]     { text-align: center; }
.user-partner-comissions-table .status-indicator .status-dot.on    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.user-partner-comissions-table .status-indicator .status-pulse.on  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.user-partner-comissions-table .status-indicator .status-dot.off   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.user-partner-comissions-table .status-indicator .status-pulse.off { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }
.sales-table th[data-column="date"],
.sales-table td[data-column="date"]              { text-align: center; }
.sales-table th[data-column="product"],
.sales-table td[data-column="product"]           { text-align: left !important; }
.sales-table th[data-column="payment_status"],
.sales-table td[data-column="payment_status"]    { text-align: center; }
.sales-table th[data-column="created_at"],
.sales-table td[data-column="created_at"]        { text-align: center; }
.sales-table th[data-column="updated_at"],
.sales-table td[data-column="updated_at"]        { text-align: center; }

/* ── purchases (user page) ── 100+120+200+260+140+120+200+260+120+350+220+220+220+160 = 2690 */
.purchases-table th[data-column="pur-id"],
.purchases-table td[data-column="pur-id"]           { text-align: center; }
.purchases-table th[data-column="pur-date"],
.purchases-table td[data-column="pur-date"]         { text-align: center; }
.purchases-table th[data-column="pur-product"],
.purchases-table td[data-column="pur-product"]      { text-align: left; }
.purchases-table th[data-column="pur-slots"],
.purchases-table td[data-column="pur-slots"]        { text-align: center; }
.purchases-table th[data-column="pur-fee"],
.purchases-table td[data-column="pur-fee"]          { text-align: center; }
.purchases-table th[data-column="pur-value"],
.purchases-table td[data-column="pur-value"]        { text-align: center; }
.purchases-table th[data-column="pur-payment"],
.purchases-table td[data-column="pur-payment"]      { text-align: center; }
.purchases-table th[data-column="pur-comission"],
.purchases-table td[data-column="pur-comission"]    { text-align: center; }
.purchases-table th[data-column="pur-notes"],
.purchases-table td[data-column="pur-notes"]        { text-align: center; }
.purchases-table th[data-column="pur-updated_at"],
.purchases-table td[data-column="pur-updated_at"]   { text-align: center; }

/* ── planes ── 120+200+300+150+200+140+180+180+160+... = 1930 */
.planes-table th[data-column="registered"],
.planes-table td[data-column="registered"]             { text-align: center; }
.planes-table th[data-column="transaction_type"],
.planes-table td[data-column="transaction_type"]       { text-align: center; }
.planes-table th[data-column="updated_at"],
.planes-table td[data-column="updated_at"]     { text-align: center; }

/* ── alerts-planes-table (página alerts — apenas aeronaves com hangar atrasado; mesma estrutura da planes-table) ── */
.alerts-planes-table .empty-dash { font-weight: 600; }
.alerts-planes-table th[data-column="registered"],
.alerts-planes-table td[data-column="registered"]             { text-align: center; }
.alerts-planes-table th[data-column="transaction_type"],
.alerts-planes-table td[data-column="transaction_type"]       { text-align: center; }
.alerts-planes-table td[data-column="notes"] .table-age { white-space: normal; word-break: break-word; overflow: hidden; }
.alerts-planes-table th[data-column="updated_at"],
.alerts-planes-table td[data-column="updated_at"]     { text-align: center; }

/* ── payment-table (product + user pages) ── 100+120+200+250+200+220+200+220+160 = 1670 */
.payment-table th[data-column="name"],
.payment-table td[data-column="name"]        { text-align: center; }
.payment-table th[data-column="updated"],
.payment-table td[data-column="updated"]     { text-align: center; }

/* ── notes-table (product + user pages) ── 100+120+120+200+360+220+200+220+160 = 1700 */
.notes-table th[data-column="tipo"],
.notes-table td[data-column="tipo"]          { text-align: center; }
.notes-table th[data-column="updated"],
.notes-table td[data-column="updated"]       { text-align: center; }

/* ── slots-table (product + user pages) ── 100+120+200+260+260+260+120+280+320+200 = 2120 */
.slots-table.fixed-tds { table-layout: auto; }
/* saltosTable: 100+120+200+260+260+120+320+200+200+160 = 1940 (+created 200) */
/* voosTable: 100+120+200+120+260+120+200+200+200+200+160 = 1880 (+created 200) */
/* vagasAircraftTable: 100+120+200+260+260+120+280+320+200+160 = 2020 */
/* vagasProductTable: 100+120+200+260+260+120+280+320+200+200+160 = 2220 (+created 200) */
.slots-table th[data-column="piloto"],
.slots-table td[data-column="piloto"]        { text-align: left; }
.slots-table th[data-column="produto"],
.slots-table td[data-column="produto"]       { text-align: left; }
.slots-table th[data-column="tipo"],
.slots-table td[data-column="tipo"]          { text-align: center; }
.slots-table th[data-column="slots"],
.slots-table td[data-column="slots"]         { text-align: center; }
/* voosTable/saltosTable/voosAircraftTable: Decolagem à esquerda (mesmo padrão da coluna takeoff da staff-profits-table) */
#voosTable th[data-column="decolagem"],
#voosTable td[data-column="decolagem"],
#saltosTable th[data-column="decolagem"],
#saltosTable td[data-column="decolagem"],
#voosAircraftTable th[data-column="decolagem"],
#voosAircraftTable td[data-column="decolagem"] { text-align: left !important; }
/* ── partners ── 100+70+150+300+260+160+110+160+220+220+200+200+200+200+160 = 2710 */
.partners-table.fixed-tds { table-layout: auto; }
.partners-table [data-column="benefit-alturas"] { white-space: nowrap; }
.sales-table .status-indicator-product,
.purchases-table .status-indicator-product,
.slots-table .status-indicator-product,
.partners-table .status-indicator-product,
.user-partner-comissions-table .status-indicator-product,
.main-takeoffs-table .status-indicator-product { position: relative; height: 10px; flex-shrink: 0; }
.reports-std-table .status-dot.on,
.fees-table .status-dot.on,
.payment-methods-table .status-dot.on,
.members-table .status-dot.on,
.alerts-members-table .status-dot.on,
.alerts-empty-table .status-dot.on,
.alerts-future-table .status-dot.on,
.planes-table .status-dot.on,
.alerts-planes-table .status-dot.on,
.alerts-fuel-table .status-dot.on,
.slots-table .status-dot.on,
.aircraft-hangar-table .status-dot.on,
.aircraft-fuel-table .status-dot.on,
.aircraft-takeoffs-table .status-dot.on,
.purchases-table .status-dot.on,
.payment-table .status-dot.on,
.notes-table .status-dot.on,
.partners-table .status-dot.on,
.finances-categories-table .status-dot.on,
.finances-invoices-table .status-dot.on,
.finances-all-invoices-table .status-dot.on,
.finances-payments-table .status-dot.on,
.products-table .status-dot.on     { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.reports-std-table .status-pulse.on,
.fees-table .status-pulse.on,
.payment-methods-table .status-pulse.on,
.members-table .status-pulse.on,
.alerts-members-table .status-pulse.on,
.alerts-empty-table .status-pulse.on,
.alerts-future-table .status-pulse.on,
.planes-table .status-pulse.on,
.alerts-planes-table .status-pulse.on,
.alerts-fuel-table .status-pulse.on,
.slots-table .status-pulse.on,
.aircraft-hangar-table .status-pulse.on,
.aircraft-fuel-table .status-pulse.on,
.aircraft-takeoffs-table .status-pulse.on,
.purchases-table .status-pulse.on,
.payment-table .status-pulse.on,
.notes-table .status-pulse.on,
.partners-table .status-pulse.on,
.finances-categories-table .status-pulse.on,
.finances-invoices-table .status-pulse.on,
.finances-all-invoices-table .status-pulse.on,
.finances-payments-table .status-pulse.on,
.products-table .status-pulse.on   { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.reports-std-table .status-dot.off,
.fees-table .status-dot.off,
.payment-methods-table .status-dot.off,
.members-table .status-dot.off,
.alerts-members-table .status-dot.off,
.alerts-empty-table .status-dot.off,
.alerts-future-table .status-dot.off,
.planes-table .status-dot.off,
.alerts-planes-table .status-dot.off,
.alerts-fuel-table .status-dot.off,
.slots-table .status-dot.off,
.aircraft-hangar-table .status-dot.off,
.aircraft-fuel-table .status-dot.off,
.aircraft-takeoffs-table .status-dot.off,
.purchases-table .status-dot.off,
.payment-table .status-dot.off,
.notes-table .status-dot.off,
.partners-table .status-dot.off,
.finances-categories-table .status-dot.off,
.finances-invoices-table .status-dot.off,
.finances-all-invoices-table .status-dot.off,
.finances-payments-table .status-dot.off,
.products-table .status-dot.off    { background: #f56565; animation: blink 2s ease-in-out infinite; }
.reports-std-table .status-pulse.off,
.fees-table .status-pulse.off,
.payment-methods-table .status-pulse.off,
.members-table .status-pulse.off,
.alerts-members-table .status-pulse.off,
.alerts-empty-table .status-pulse.off,
.alerts-future-table .status-pulse.off,
.planes-table .status-pulse.off,
.alerts-planes-table .status-pulse.off,
.alerts-fuel-table .status-pulse.off,
.slots-table .status-pulse.off,
.aircraft-hangar-table .status-pulse.off,
.aircraft-fuel-table .status-pulse.off,
.aircraft-takeoffs-table .status-pulse.off,
.purchases-table .status-pulse.off,
.payment-table .status-pulse.off,
.notes-table .status-pulse.off,
.partners-table .status-pulse.off,
.finances-categories-table .status-pulse.off,
.finances-invoices-table .status-pulse.off,
.finances-all-invoices-table .status-pulse.off,
.finances-payments-table .status-pulse.off,
.products-table .status-pulse.off  { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }
/* Dot do produto na coluna Produto (status-indicator-product) */
.sales-table .status-indicator-product .status-dot.on,
.purchases-table .status-indicator-product .status-dot.on,
.slots-table .status-indicator-product .status-dot.on,
.user-partner-comissions-table .status-indicator-product .status-dot.on,
.main-takeoffs-table .status-indicator-product .status-dot.on        { background: #e0e0e0; animation: blink 2s ease-in-out infinite; }
.sales-table .status-indicator-product .status-pulse.on,
.purchases-table .status-indicator-product .status-pulse.on,
.slots-table .status-indicator-product .status-pulse.on,
.user-partner-comissions-table .status-indicator-product .status-pulse.on,
.main-takeoffs-table .status-indicator-product .status-pulse.on      { border: 1px solid #e0e0e0; animation: pulse 2s ease-out infinite; }
.sales-table .status-indicator-product .status-dot.off,
.purchases-table .status-indicator-product .status-dot.off,
.slots-table .status-indicator-product .status-dot.off,
.user-partner-comissions-table .status-indicator-product .status-dot.off,
.main-takeoffs-table .status-indicator-product .status-dot.off       { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.sales-table .status-indicator-product .status-pulse.off,
.purchases-table .status-indicator-product .status-pulse.off,
.slots-table .status-indicator-product .status-pulse.off,
.user-partner-comissions-table .status-indicator-product .status-pulse.off,
.main-takeoffs-table .status-indicator-product .status-pulse.off     { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
/* Dot do produto na tabela de benefícios: on=ativo(verde), off=inativo(vermelho) */
.partners-table .status-indicator-product .status-dot.on     { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.partners-table .status-indicator-product .status-pulse.on   { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.partners-table .status-indicator-product .status-dot.off    { background: #f56565; animation: blink 2s ease-in-out infinite; }
.partners-table .status-indicator-product .status-pulse.off  { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }
.sales-table .status-indicator-product .status-dot.in-use,
.purchases-table .status-indicator-product .status-dot.in-use,
.slots-table .status-indicator-product .status-dot.in-use,
.user-partner-comissions-table .status-indicator-product .status-dot.in-use,
.main-takeoffs-table .status-indicator-product .status-dot.in-use    { background: #4299e1; animation: blink 2s ease-in-out infinite; }
.sales-table .status-indicator-product .status-pulse.in-use,
.purchases-table .status-indicator-product .status-pulse.in-use,
.slots-table .status-indicator-product .status-pulse.in-use,
.user-partner-comissions-table .status-indicator-product .status-pulse.in-use,
.main-takeoffs-table .status-indicator-product .status-pulse.in-use  { border: 1px solid #4299e1; animation: pulse 2s ease-out infinite; }
/* Produto de venda deletada: dot vermelho padrão (#f56565, mesmo do status
   inativo), com o subtexto "Venda Apagada". Cobre a tabela de vendas (sales)
   e a de compras do usuário (purchases). */
.sales-table .status-indicator-product .status-dot.deleted,
.user-partner-comissions-table .status-indicator-product .status-dot.deleted,
.purchases-table .status-indicator-product .status-dot.deleted    { background: #f56565; animation: blink 2s ease-in-out infinite; }
.sales-table .status-indicator-product .status-pulse.deleted,
.user-partner-comissions-table .status-indicator-product .status-pulse.deleted,
.purchases-table .status-indicator-product .status-pulse.deleted  { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }

/* Aeronave apagada na tabela de aeronaves (planes): o status-dot normal fica
   vermelho (#f56565), mesmo padrão do dot deletado das vendas. */
.planes-table .status-indicator .status-dot.deleted   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.planes-table .status-indicator .status-pulse.deleted { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }

/* ── main-takeoffs-table (takeoffs page table view) ── 100+80+120+320+220+140+200+240+190 = 1610 */
.main-takeoffs-table th[data-column="tk-check"],
.main-takeoffs-table td[data-column="tk-check"]   { text-align: center; }
.main-takeoffs-table th[data-column="id"],
.main-takeoffs-table td[data-column="id"]         { text-align: center; }
.main-takeoffs-table th[data-column="tipo"],
.main-takeoffs-table td[data-column="tipo"]       { text-align: center; }
.main-takeoffs-table th[data-column="produto"],
.main-takeoffs-table td[data-column="produto"]    { text-align: left !important; }
.main-takeoffs-table th[data-column="altura"],
.main-takeoffs-table td[data-column="altura"]     { text-align: center; }
.main-takeoffs-table .status-indicator .status-dot.on    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.main-takeoffs-table .status-indicator .status-pulse.on  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.main-takeoffs-table .status-indicator .status-dot.off   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.main-takeoffs-table .status-indicator .status-pulse.off { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }

/* ── aircraft-takeoffs-table (aircraft page) ── 100+120+200+260+300+120+220+200+200+200+160 = 2180 */
.aircraft-takeoffs-table th[data-column="decolagem"],
.aircraft-takeoffs-table td[data-column="decolagem"]  { text-align: left; }
.aircraft-takeoffs-table th[data-column="tipo"],
.aircraft-takeoffs-table td[data-column="tipo"]       { text-align: left !important; }
.aircraft-takeoffs-table th[data-column="slots"],
.aircraft-takeoffs-table td[data-column="slots"]      { text-align: center; }
.aircraft-takeoffs-table th[data-column="takeoff_note"],
.aircraft-takeoffs-table td[data-column="takeoff_note"] { text-align: center; }
/* ── aircraft-hangar-table (aircraft page) ── 100+120+220+120+130+140+160+220+220+220+200+220+220+160 = 2450 */
.aircraft-hangar-table th[data-column="data"],
.aircraft-hangar-table td[data-column="data"]             { text-align: center; }
.aircraft-hangar-table th[data-column="transacao"],
.aircraft-hangar-table td[data-column="transacao"]        { text-align: center; }
.aircraft-hangar-table th[data-column="status"],
.aircraft-hangar-table td[data-column="status"]           { text-align: center; }
.aircraft-hangar-table th[data-column="valor"],
.aircraft-hangar-table td[data-column="valor"]            { text-align: center; }
.aircraft-hangar-table th[data-column="vencimento"],
.aircraft-hangar-table td[data-column="vencimento"]       { text-align: center; }
.aircraft-hangar-table th[data-column="hangar_note"],
.aircraft-hangar-table td[data-column="hangar_note"]      { text-align: center; }
.aircraft-hangar-table th[data-column="paid_at"],
.aircraft-hangar-table td[data-column="paid_at"]          { text-align: center; }
.aircraft-hangar-table th[data-column="updated_at"],
.aircraft-hangar-table td[data-column="updated_at"]       { text-align: center; }

/* ── aircraft-fuel-table (aircraft page) ── 100+120+220+120+130+140+140+160+200+260+220+200+200+220+160 = 2590 */
.aircraft-fuel-table th[data-column="data"],
.aircraft-fuel-table td[data-column="data"]         { text-align: center; }
.aircraft-fuel-table th[data-column="transacao"],
.aircraft-fuel-table td[data-column="transacao"]    { text-align: center; }
.aircraft-fuel-table th[data-column="vencimento"],
.aircraft-fuel-table td[data-column="vencimento"]   { text-align: center; }
.aircraft-fuel-table th[data-column="quantidade"],
.aircraft-fuel-table td[data-column="quantidade"]   { text-align: center; }
.aircraft-fuel-table th[data-column="valor"],
.aircraft-fuel-table td[data-column="valor"]        { text-align: center; }
.aircraft-fuel-table th[data-column="status"],
.aircraft-fuel-table td[data-column="status"]       { text-align: center; }
.aircraft-fuel-table th[data-column="created_at"],
.aircraft-fuel-table td[data-column="created_at"]   { text-align: center; }
.aircraft-fuel-table th[data-column="paid_at"],
.aircraft-fuel-table td[data-column="paid_at"]      { text-align: center; }
.aircraft-fuel-table th[data-column="updated_at"],
.aircraft-fuel-table td[data-column="updated_at"]   { text-align: center; }

/* ── planes-fuel-table (planes page — todos os registros, inclui coluna aeronave) ── 100+120+220+300+160+130+140+140+160+220+200+260+220+200+220+220+160 = 3070 */
.planes-fuel-table th[data-column="data"],
.planes-fuel-table td[data-column="data"]         { text-align: center; }
.planes-fuel-table th[data-column="transacao"],
.planes-fuel-table td[data-column="transacao"]    { text-align: center; }
.planes-fuel-table th[data-column="status"],
.planes-fuel-table td[data-column="status"]       { text-align: center; }
.planes-fuel-table th[data-column="valor"],
.planes-fuel-table td[data-column="valor"]        { text-align: center; }
.planes-fuel-table th[data-column="quantidade"],
.planes-fuel-table td[data-column="quantidade"]   { text-align: center; }
.planes-fuel-table th[data-column="vencimento"],
.planes-fuel-table td[data-column="vencimento"]   { text-align: center; }
.planes-fuel-table th[data-column="created_at"],
.planes-fuel-table td[data-column="created_at"]   { text-align: center; }
.planes-fuel-table th[data-column="paid_at"],
.planes-fuel-table td[data-column="paid_at"]      { text-align: center; }
.planes-fuel-table th[data-column="updated_at"],
.planes-fuel-table td[data-column="updated_at"]   { text-align: center; }
.planes-fuel-table .status-dot.on    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.planes-fuel-table .status-pulse.on  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.planes-fuel-table .status-dot.off   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.planes-fuel-table .status-pulse.off { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }

/* ── alerts-fuel-table (página alerts — apenas combustíveis atrasados; mesma estrutura da planes-fuel-table) ── */
.alerts-fuel-table th[data-column="data"],
.alerts-fuel-table td[data-column="data"]         { text-align: center; }
.alerts-fuel-table th[data-column="transacao"],
.alerts-fuel-table td[data-column="transacao"]    { text-align: center; }
.alerts-fuel-table th[data-column="status"],
.alerts-fuel-table td[data-column="status"]       { text-align: center; }
.alerts-fuel-table th[data-column="valor"],
.alerts-fuel-table td[data-column="valor"]        { text-align: center; }
.alerts-fuel-table th[data-column="quantidade"],
.alerts-fuel-table td[data-column="quantidade"]   { text-align: center; }
.alerts-fuel-table th[data-column="vencimento"],
.alerts-fuel-table td[data-column="vencimento"]   { text-align: center; }
.alerts-fuel-table th[data-column="created_at"],
.alerts-fuel-table td[data-column="created_at"]   { text-align: center; }
.alerts-fuel-table th[data-column="paid_at"],
.alerts-fuel-table td[data-column="paid_at"]      { text-align: center; }
.alerts-fuel-table th[data-column="updated_at"],
.alerts-fuel-table td[data-column="updated_at"]   { text-align: center; }
.alerts-fuel-table .status-dot.on    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.alerts-fuel-table .status-pulse.on  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.alerts-fuel-table .status-dot.off   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.alerts-fuel-table .status-pulse.off { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }

/* pilot on/off dots inside aircraft-takeoffs-table */
.aircraft-takeoffs-table .status-indicator .status-dot.on    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.aircraft-takeoffs-table .status-indicator .status-pulse.on  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.aircraft-takeoffs-table .status-indicator .status-dot.off   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.aircraft-takeoffs-table .status-indicator .status-pulse.off { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }
/* Voo apagado: dot do status do voo fica vermelho (#f56565, padrão deletado). */
.aircraft-takeoffs-table .status-indicator .status-dot.deleted,
.aircraft-takeoffs-table .status-indicator-product .status-dot.deleted   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.aircraft-takeoffs-table .status-indicator .status-pulse.deleted,
.aircraft-takeoffs-table .status-indicator-product .status-pulse.deleted { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }
/* takeoff status dots: scheduled=gray, in_flight=blue, completed=green */
.status-dot.tk-scheduled    { background: #e0e0e0; animation: blink 2s ease-in-out infinite; }
.status-pulse.tk-scheduled  { border: 1px solid #e0e0e0; animation: pulse 2s ease-out infinite; }
.status-dot.tk-in_flight    { background: #4299e1; animation: blink 2s ease-in-out infinite; }
.status-pulse.tk-in_flight  { border: 1px solid #4299e1; animation: pulse 2s ease-out infinite; }
.status-dot.tk-completed    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.status-pulse.tk-completed  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }

/* Dot do cliente na coluna Cliente (status-indicator) */
.sales-table .status-indicator .status-dot.on    { background: #48bb78; animation: blink 2s ease-in-out infinite; }
.sales-table .status-indicator .status-pulse.on  { border: 1px solid #48bb78; animation: pulse 2s ease-out infinite; }
.sales-table .status-indicator .status-dot.off   { background: #f56565; animation: blink 2s ease-in-out infinite; }
.sales-table .status-indicator .status-pulse.off { border: 1px solid #f56565; animation: pulse 2s ease-out infinite; }
.table-name { font-size: 15px; color: #3c3c3c; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s ease; }
.table-name:hover { color: #3c3c3c; }
.table-row.status-off .table-name { color: #f56565; }

.th-age, .td-age { text-align: center !important; }
.table-age { font-size: 15px; color: #3c3c3c; font-weight: 400; white-space: nowrap; transition: color 0.2s ease; }
.table-age:hover { color: #3c3c3c; }
.table-row.status-off .table-age { color: #f56565; }

.th-ads, .td-ads { text-align: center !important; }
.table-ads-container { display: flex; align-items: center; justify-content: center; gap: 8px; }
.table-count { font-size: 15px; font-weight: 400; color: #3c3c3c; letter-spacing: -0.5px; white-space: nowrap; transition: color 0.2s ease; }
.table-count:hover { color: #3c3c3c; }
.table-row.category-track .table-count { color: #48bb78; }
.table-row.status-off .table-count { color: #f56565; }
.table-count-label { font-size: 14px; font-weight: 400; }

.th-stats-24h, .th-stats-7d, .th-stats-28d,
.td-stats-24h, .td-stats-7d, .td-stats-28d { text-align: center !important; }
.table-stats { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 500; color: #9a9a9a; transition: color 0.2s ease; }
.table-stats svg.arrow_stats_up { stroke: #9a9a9a; }
.table-stats svg.arrow_stats_down { stroke: #9a9a9a; }
.table-row.category-track .table-stats svg.arrow_stats_up { stroke: #48bb78; }
.table-row.category-track .table-stats svg.arrow_stats_down { stroke: #f56565; }

.th-niche, .td-niche { text-align: center !important; }
.th-name[data-column="comission_value"], .td-name[data-column="comission_value"] { text-align: center !important; }
.planes-table .th-niche[data-column="fuel"], .planes-table .td-niche[data-column="fuel"] { text-align: left !important; }
.table-niche { font-size: 14px; color: #3c3c3c; font-weight: 400; transition: color 0.2s ease; }
.table-niche:hover { color: #3c3c3c; }

.th-country, .td-country { text-align: center !important; }
.table-country { display: flex; justify-content: center; align-items: center; font-size: 20px; }

.th-tags, .td-tags { text-align: center !important; }
.table-tags { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.tag-badge { padding: 4px 10px; background: #fafafa; border: 2px dashed #e0e0e0; color: #9a9a9a; font-size: 12px; font-weight: 500; white-space: nowrap;  }

.th-rarity, .td-rarity { text-align: center !important; }
.table-rarity { display: flex; align-items: center; justify-content: center; }
.rarity-badge-table { padding: 4px 10px; font-size: 14px; font-weight: 600;  white-space: nowrap; }

.validity-ativo    { background: #ebffcf; border: 2px dashed #48bb78; color: #08662e; }
.validity-expirada { background: #ffe0e0; border: 2px dashed #ffb0b0; color: #d32f2f; }

.license-ativa     { background: #ebffcf; border: 2px dashed #48bb78; color: #08662e; }
.license-expirada  { background: #ffe0e0; border: 2px dashed #ffb0b0; color: #d32f2f; }

.gender-m { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; }
.gender-f { background: #f3e8ff; border: 2px dashed #d8b4fe; color: #7c3aed; }

.slots-open    { background: #ebffcf; border: 2px dashed #48bb78; color: #08662e; }
.saldo-zero    { background: #f5f5f5; border: 2px dashed #d9d9d9; color: #595959; }
.saldo-zerado  { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; }
.saldo-estorno { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; }
.discount-badge { background: #ebffcf; border: 2px dashed #48bb78; color: #08662e; }
.slots-in-use  { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; }
.slots-done    { background: #ffe0e0; border: 2px dashed #ffb0b0; color: #d32f2f; }
.pay-open      { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; font-weight: 700; }
.pay-paid      { background: #ebffcf; border: 2px dashed #48bb78; color: #08662e; font-weight: 700; }
.pay-overdue   { background: #ffe0e0; border: 2px dashed #ffb0b0; color: #d32f2f; font-weight: 700; }
/* Tipo de observação: NOTA (azul) x EDIÇÃO (roxo) na tabela de observações da venda */
.note-type-nota { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fa8; font-weight: 700; }
.note-type-edit { background: #f3e8ff; border: 2px dashed #d8b4fe; color: #7c3aed; font-weight: 700; }
/* Observação APAGADA: badge vermelho (padrão das rows deletadas do sistema) */
.note-type-deleted { background: #ffe0e0; border: 2px dashed #ffb0b0; color: #d32f2f; font-weight: 700; }
.voos-full     { background: #ebffcf; border: 2px dashed #48bb78; color: #08662e; }
.voos-high     { background: #e6f7ff; border: 2px dashed #91d5ff; color: #1a6fb5; }
.voos-low      { background: #ffe0e0; border: 2px dashed #ffb0b0; color: #c62828; }
.user-star        { vertical-align: middle; }
.user-star-red    { color: #e53e3e; }
.user-star-yellow { color: #f6ad55; }
.user-star-empty  { color: #e0e0e0; }

[data-tooltip]:not(.category-ribbon) { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #3c3c3c;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
}
[data-tooltip]:not(.category-ribbon):hover::after { opacity: 1; }
.category-ribbon[data-tooltip]::after { display: none; }
.ribbon-tooltip-popup {
    position: fixed;
    background: #3c3c3c;
    color: #ffffff;
    font-size: 16px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 99999;
}
[data-tooltip-below] { position: relative; overflow: visible; }
[data-tooltip-below]::after {
    content: attr(data-tooltip-below);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #3c3c3c;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
}
[data-tooltip-below]:hover::after { opacity: 1; }
/* Botões desabilitados não exibem tooltip (padrão: exportar/ajustes disabled não têm) */
.btn-partner-add-disabled[data-tooltip-below]:hover::after,
.table-filter-btn-disabled[data-tooltip-below]:hover::after,
.btn4-disabled[data-tooltip-below]:hover::after,
.btn-disabled[data-tooltip-below]:hover::after { opacity: 0; }
.table-niche-copy {
    transition: transform 0.15s ease;
}
.table-niche-copy:hover {
    transform: translateY(-2px);
}
.table-niche-copy:active {
    transform: translateY(0);
}
.type-admin { background: #fff7e0; border: 2px dashed #f6ad55; color: #92400e; }
.type-user  { background: #f0f0f0; border: 2px dashed #bdbdbd; color: #555555; }
.type-multi { background: #fff7e0; border: 2px dashed #f6ad55; color: #92400e; }
.type-high  { background: #fff1f0; border: 2px dashed #ffb0b0; color: #d32f2f; }

.payment-cash { background: #fff9e6; border: 2px dashed #ffe58f; color: #8b7500; }

th[data-column].column-hidden,
td[data-column].column-hidden { display: none !important; }

/* Star icon */
.star-list-icon { display: inline-block; font-size: 24px; color: #fbbf24; animation: blink 2s ease-in-out infinite; }

/* ============================================================
   COLUMN FILTER BAR
   ============================================================ */

.column-filter-bar {
    background: #fff;
    margin-top: 32px;
    border: 2px dashed #e0e0e0;
    padding: 16px;
    display: flex;
    align-items: center;
    color: #3c3c3c;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.column-filter-bar-list { justify-content: flex-end; }

.column-filter-bar .filters-menu-left {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
    order: -1;
    margin-right: auto;
}

.column-filter-bar .filters-menu-left .filter-counter {
    padding: 0 18px;
    height: 38px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #3c3c3c;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.column-filter-bar .filters-menu-left .filter-counter:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border-color: #91d5ff;
}

.column-filter-bar .filters-menu-left .clear-filters-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #3c3c3c;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.column-filter-bar .filters-menu-left .clear-filters-btn:hover {
    transform: translateY(-2px);
    background: #fff1f0;
    border-color: #ffa39e;
    color: #cf1322;
}

.column-filter-bar .filters-menu-left .clear-filters-btn svg { width: 18px; height: 18px; }

.column-filter-bar .column-filter-btn-reset,
.column-filter-bar .column-filter-btn-clear { order: 1; }

.column-filter-bar .column-filter-btn-reset:hover,
.column-filter-bar .column-filter-btn-clear:hover {
    transform: translateY(-2px);
    background: #fff1f0 !important;
    border-color: #ffa39e !important;
    color: #cf1322 !important;
}

.column-filter-btn-reset,
.column-filter-btn-clear {
    padding: 0 18px;
    height: 38px;
    font-size: 13px;
    white-space: nowrap;
}

.column-filter-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
    order: 2;
}

.column-filter-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    padding: 0 18px;
    height: 38px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    
    color: #3c3c3c;
    font-size: 13px;
    font-weight: 600;
    user-select: none;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-sizing: border-box;
}

.column-filter-checkbox:hover {
    transform: translateY(-2px) !important;
    background: #e0e0e0;
    border-color: #bababa;
}

.column-filter-checkbox input[type="checkbox"] { display: none; }

.column-filter-checkbox:has(input[type="checkbox"]:checked) {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #3c3c3c;
}

.column-filter-checkbox:has(input[type="checkbox"]:checked):hover {
    background: #e6f7ff;
    border-color: #91d5ff;
}

@media (max-width: 768px) {
    .pages-list-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   REPORT TABLE BLOCKS
   ============================================================ */

.report-table-block {
    margin-top: 32px;
}

.report-table-block .column-filter-bar-list {
    justify-content: flex-start;
    background: #3c3c3c;
    border-color: #3c3c3c;
}

.report-table-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.report-tables-row {
    display: flex;
    flex-direction: column;
}

.report-tables-row .pages-list-table + .pages-list-table .pages-table {
    border-top: none;
}

.pages-list-table--no-margin-top {
    margin-top: 0;
}

/* O primeiro .pages-list-table de cada página nunca tem margin-top.
   :first-of-type não serve porque há outras <div> antes (breadcrumb-row,
   header). Usa-se :has() para zerar a tabela que NÃO é precedida por
   nenhuma outra .pages-list-table no mesmo container — ou seja, a 1ª.
   O 2º seletor cobre o reports, cujas tabelas vivem num wrapper
   (#reportsTablesContainer, trocado por inteiro ao filtrar por data). */
.pages-container > .pages-list-table:not(:where(.pages-list-table ~ .pages-list-table)),
#reportsTablesContainer > .pages-list-table:not(:where(.pages-list-table ~ .pages-list-table)) {
    margin-top: 0;
}

/* Como a 1ª tabela não tem margin-top, o container dos cards precisa de
   margin-bottom para não colar na primeira .pages-list-table abaixo. */
#cardsContainer {
    margin-bottom: 32px;
}

.report-table-block .pages-table:not(.report-table-no-top) {
    border-top: none;
    border-bottom: none;
}

.report-table-block .pages-table:not(.report-table-no-top) thead th {
    border-top: none;
}

.report-table-block .pages-table tbody td:nth-child(odd),
.report-table-block .pages-table tbody td:nth-child(even),
.report-table-block .pages-table tbody td:nth-child(1) {
    background-color: #ffffff !important;
}

.report-table-no-top {
    border-top: none !important;
}

.report-col-1 {
    width: 60%;
    padding: 10px 20px;
    vertical-align: middle;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.report-col-2 {
    width: 20%;
    padding: 10px 20px;
    vertical-align: middle;
    text-align: center !important;
    font-size: 13px;
    font-weight: 600;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.report-col-3 {
    width: 20%;
    padding: 10px 20px;
    vertical-align: middle;
    text-align: center !important;
    font-size: 13px;
    font-weight: 600;
    color: #9a9a9a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.report-fixed-table tbody td.report-col-2,
.report-fixed-table tbody td.report-col-2 .table-count,
.report-fixed-table tbody td.report-col-3,
.report-fixed-table tbody td.report-col-3 .table-count {
    text-align: center !important;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.cursor-pointer { cursor: pointer; }

.search-wrapper-flex {
    flex: 1;
}

.table-flag-img {
    width: 24px;
    height: 18px;
    display: inline-block;
}

.td-center { text-align: center; }

.table-note {
    font-size: 15px;
    font-weight: 400;
}

.nickname-muted {
    color: #9a9a9a;
    font-weight: 400;
}

.pages-bottom-bar {
    margin-top: 0;
    background: transparent;
}
.pages-list-table .pages-bottom-bar {
    padding-top: 16px;
    background: #ffffff;
}

/* Tabelas da página Estatísticas (reports): padrão próprio — sem paginação,
   sem coluna de ações, todas as linhas acumuladas (o scroll não limita altura).
   Renderizadas por lib/tables/reports_table.php. */
.reports-table-scroll {
    overflow-y: visible;
}

/* Larguras fixas das tabelas da página Estatísticas (reports). Todas usam a
   classe comum .reports-std-table (passada via table_class na lib), então uma
   única regra vale para todas — inclusive as geradas em loop (produtos), cujo
   id é dinâmico. */
.reports-std-table [data-column="total"] { text-align: left !important; }
.reports-std-table [data-column="units"] { text-align: center !important; }
.reports-std-table [data-column="slots"] { text-align: center !important; }

/* Tabela de forma de pagamento dos produtos: tem a coluna extra Transação
   (badge Entrada/Saída) entre o checkbox e a Forma de Pagamento. */
.reports-payment-table [data-column="transacao"] { white-space: nowrap; text-align: center !important; }

/* Ranking de produtos: 5 colunas (transação, produto largo, unidades, receita,
   ticket). Sobrescreve os 70% do std para caber as 3 métricas. */
.reports-rank-table [data-column="transacao"] { white-space: nowrap; text-align: center !important; }
.reports-rank-table [data-column="total"]     { width: auto;  text-align: left !important; }
.reports-rank-table [data-column="units"]     { text-align: center !important; }
.reports-rank-table [data-column="slots"]     { text-align: center !important; }
.reports-rank-table [data-column="ticket"]    { text-align: center !important; }

.pagination-svg {
    width: 20px;
    height: 20px;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    padding: 32px;
}

.login-container {
    background: #ffffff;
    
    padding: 48px;
    width: 100%;
    max-width: 420px;
    border: 1px solid #e0e0e0;
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo {
    font-family: 'BBH Bartle', sans-serif;
    font-weight: 400;
    font-size: 30px;
    color: #3c3c3c;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
    line-height: 1;
}

.login-subtitle {
    font-size: 12px;
    text-transform: uppercase;
    color: #9a9a9a;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

/* Sudo prompt: campo único no body — a margem inferior do .login-field sobraria
   como espaço morto antes do footer. */
#sudoPromptModal .login-field {
    margin-bottom: 0;
}

/* Sudo prompt: mais estreito que os 800px do padrão (só um campo de senha). */
#sudoPromptModal .modal-container {
    width: 600px;
}

.select-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-label {
    font-size: 12px;
    font-weight: 700;
    color: #3c3c3c;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.login-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px dashed #e0e0e0;
    
    font-size: 16px;
    height: 50px;
    color: #3c3c3c;
    background: #ffffff;
    transition: all 0.15s ease;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    user-select: text;
    -webkit-user-select: text;
}

.login-input:hover { border-color: #bababa; }

.login-input:focus {
    outline: none;
    border-color: #3c3c3c;
    border-style: dashed;
}

.login-input::placeholder {
    color: #c0c0c0;
    font-weight: 400;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    box-shadow: 0 0 0px 1000px #ffffff inset;
    -webkit-text-fill-color: #3c3c3c;
    transition: background-color 5000s ease-in-out 0s;
}

.password-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field-wrapper .login-input { padding-right: 44px; }

.password-toggle-btn {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9a9a9a;
    transition: color 0.15s ease;
}

.password-toggle-btn:hover { color: #3c3c3c; }

.password-toggle-btn svg {
    width: 18px;
    height: 18px;
}

.login-checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    margin-top: -4px;
}

.login-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3c3c3c;
}

.login-checkbox-label {
    font-size: 12px;
    text-transform: uppercase;
    color: #3c3c3c;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.login-btn {
    width: 100%;
    padding: 14px 24px;
    background: #3c3c3c;
    border: 2px dashed #3c3c3c;
    
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-btn:hover {
    background: #0f110e;
    border-color: #3c3c3c;
}

.login-btn:active { transform: scale(0.98); }

.login-btn-primary { border: none; }

.login-btn-tandem  { background: #ebffcf; border: 2px dashed #a5ee70; color: #08662e; transition: background 500ms ease-in-out, border 500ms ease-in-out, color 500ms ease-in-out, transform 0.15s ease; }
.login-btn-tandem:hover  { background: #d6ffb3; border-color: #38a169; transform: translateY(-2px); }
.login-btn-tandem:active { transform: translateY(0); }

.login-btn-aluno  { background: #e6f7ff; border: 2px dashed #91d5ff; color: #3c3c3c; transition: background 500ms ease-in-out, border 500ms ease-in-out, color 500ms ease-in-out, transform 0.15s ease; }
.login-btn-aluno:hover  { background: #bae7ff; border-color: #69c0ff; transform: translateY(-2px); }
.login-btn-aluno:active { transform: translateY(0); }

.login-btn-partner  { background: #fff9e6; border: 2px dashed #f6ad55; color: #8b7500; transition: background 500ms ease-in-out, border 500ms ease-in-out, color 500ms ease-in-out, transform 0.15s ease; }
.login-btn-partner:hover  { background: #ffe9b3; border-color: #ed8936; transform: translateY(-2px); }
.login-btn-partner:active { transform: translateY(0); }

.login-container { width: 520px; max-width: 520px; }

.login-input option { font-family: "Montserrat", sans-serif; }

select.login-input {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.reg-hidden { display: none; }

.field-error { border-color: #c53030 !important; border-style: dashed !important; }
select.field-error { border-color: #c53030 !important; border-style: dashed !important; }

.field-hint {
    font-size: 11px;
    color: #9a9a9a;
    margin-top: -4px;
    font-family: "Montserrat", sans-serif;
}

.field-hint.error { color: #c53030; }

.nick-inline { color: #9a9a9a; }

.arrow-up   { width: 14px; height: 14px; fill: #2e7d32; transform: rotate(180deg); display: inline-block; vertical-align: middle; margin-right: 4px; margin-top: -2px; }
.arrow-down { width: 14px; height: 14px; fill: #c62828; display: inline-block; vertical-align: middle; margin-right: 4px; margin-top: -2px; }

.label-optional {
    font-size: 9px;
    font-weight: 600;
    color: #b0b0b0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 6px;
    position: relative;
    top: -1px;
}

.login-btn-secondary {
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 16px;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
}

.login-btn-secondary:hover {
    background: #ececec;
    border-color: #bababa;
    color: #3c3c3c;
}

.login-message {
    width: 100%;
    padding: 0 24px;
    
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease, padding 0.3s ease;
}

.login-message.show {
    max-height: 50px;
    height: 50px;
    padding: 0 24px;
    opacity: 1;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-message-error {
    background: #fde8e8;
    border: none;
    color: #c53030;
    font-weight: 400;
}

.login-error {
    color: #f56565;
    font-weight: 600;
}

.login-success {
    color: #48bb78;
    font-weight: 600;
}

@media (max-width: 480px) {
    .login-wrapper { padding: 20px; }
    .login-container { padding: 32px 24px; }
    .login-logo { font-size: 26px; }
}

/* ─── Geo search dropdown ──────────────────────────────────────────────────── */
.geo-wrapper {
    position: relative;
}

.geo-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.geo-input-row .geo-search {
    flex: 1;
    min-width: 0;
}

.geo-nickname {
    font-size: 13px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.geo-wrapper .geo-search {
    padding-right: 38px;
}

.geo-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 2px dashed #3c3c3c;
    border-top: none;
    border-radius: 0 0 2px 2px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    margin: 0;
    padding: 0;
    list-style: none;
}

.geo-dropdown.open { display: block; }

.geo-dropdown li {
    padding: 10px 16px;
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #3c3c3c;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.geo-dropdown li:last-child { border-bottom: none; }

.geo-dropdown li:hover,
.geo-dropdown li.active { background: #f5f5f5; }

#novoProdutoAltitudeWrapper .geo-dropdown { max-height: 120px; }
#takeoffAltitudeWrapper .geo-dropdown { max-height: 120px; }
#takeoffEditAltitudeWrapper .geo-dropdown { max-height: 120px; }

.geo-dropdown li.geo-empty {
    color: #9a9a9a;
    cursor: default;
    font-style: italic;
}

.geo-dropdown li.geo-loading {
    color: #b0b0b0;
    cursor: default;
}

/* ========================================
   MODAL BASE
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-overlay.show {
    display: flex;
    animation: overlayFadeIn 0.2s ease-out forwards;
}

.modal-overlay.closing {
    animation: overlayFadeOut 0.2s ease-out forwards;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes overlayFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

html.modal-open,
body.modal-open {
    overflow: hidden;
}

.modal-container {
    background: #ffffff;
    
    width: 800px;
    max-width: 90%;
    animation: modalSlideIn 0.2s ease-out forwards;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateZ(0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateZ(0) scale(0.95);
    }
}

.modal-container.closing {
    animation: modalSlideOut 0.2s ease-out forwards;
}

.modal-overlay.step-password .modal-container {
    width: 600px;
    max-width: 90%;
}

.modal-header {
    padding: 28px 0 28px 28px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 93px;
    box-sizing: border-box;
}

.modal-title {
    font-size: 25px;
    font-weight: 600;
    color: #3c3c3c;
    margin: 0;
    letter-spacing: -0.2px;
    text-transform: uppercase;
}

.modal-body {
    padding: 28px;
}

.modal-footer {
    padding: 28px;
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    border-top: 1px solid #eee;
}

.modal-no-results-badge {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: #e6f7ff;
    border: 2px dashed #91d5ff;
    color: #3c3c3c;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.modal-close {
    background: none;
    border: none;
    width: 93px;
    height: 93px;
    cursor: pointer;
    color: #9a9a9a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-close:hover {
    color: #3c3c3c;
    background: #eee;
}

.modal-close:active,
.modal-close.closing {
    background: white !important;
    color: #9a9a9a !important;
    border-bottom: 1px solid #eee !important;
}

.modal-close svg {
    display: block;
    width: 24px;
    height: 24px;
}

.modal-btn {
    padding: 10px 25px;
    
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.modal-btn-cancel {
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
}

.modal-btn-cancel:hover {
    background: #ececec;
    border-color: #bababa;
}

/* ========================================
   PROFILE MODAL STYLES
   ======================================== */

#profileModal .modal-container,
#memberModal .modal-container,
#saleEditModal .modal-container,
#takeoffEditModal .modal-container,
#selectClientModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}

#saleEditModal.step-delete .modal-container {
    max-height: none;
}

#takeoffEditModal .modal-body {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}

/* Editar Permissões: 7 dropdowns deixam o form alto — mesmo padrão dos modais
   grandes (container limitado + body com scroll interno). */
#permissionEditModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}
#permissionEditModal .modal-body {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}

#profileModal .modal-body,
#memberModal .modal-body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

/* selectClient: body visível por padrão (etapa de cliente/produto tem dropdown
   que precisa vazar p/ fora); só na etapa de instrutores (sc-step3) vira scroll. */
#selectClientModal .modal-body {
    padding: 28px;
    overflow-y: visible;
    flex: 1;
}
#selectClientModal.sc-step3 .modal-body {
    overflow-y: auto;
}

#saleEditModal .modal-body {
    padding: 28px;
    flex: 1;
}

#saleEditModal.step-2 .modal-body {
    overflow: visible;
}

#saleEditModal.step-3 .modal-container {
    max-height: 700px;
    min-height: 653px;
    display: flex;
    flex-direction: column;
}

#saleEditModal.step-confirm .modal-container {
    min-height: 0;
}
#saleEditModal.step-confirm .modal-footer,
#saleEditModal.step-confirm.has-alert .modal-footer {
    padding-top: 28px;
}

#saleEditModal.step-3 .modal-body {
    overflow-y: auto;
    flex: 1;
    border-bottom: 1px solid #eee;
}

#saleEditModal .member-role-menu.open-up,
#saleNewModal .member-role-menu.open-up,
#takeoffTransferModal .member-role-menu.open-up {
    top: auto;
    bottom: calc(100% + 4px);
}

#saleEditModal .profile-avatar-container:hover .avatar-overlay {
    opacity: 0;
}

#saleEditModal .profile-avatar-container:hover .profile-avatar {
    opacity: 1;
}

.profile-avatar-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.profile-avatar-container {
    position: relative;
    width: 194px;
    height: 194px;
    flex-shrink: 0;
    cursor: pointer;

    overflow: hidden;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    background: #ffffff;
    display: block;
    transition: opacity 0.2s ease;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.profile-avatar-container:hover .avatar-overlay {
    opacity: 1;
}

.profile-avatar-container:hover .profile-avatar {
    opacity: 0.8;
}

.avatar-overlay svg {
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.avatar-overlay span {
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-main-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto;
}

.profile-main-inputs .form-input {
    height: 54px;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-form .login-field {
    margin-bottom: 0;
    gap: 8px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-input {
    flex: 1;
}

#memberModal .form-row > * {
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
    width: calc(50% - 8px);
}

#memberModal .form-row .form-input {
    flex: 1;
}

#memberStep1,
#planeStep1 {
    display: contents;
}

.profile-language-dropdown {
    flex: 1;
    position: relative;
}

.profile-language-dropdown .pagination-btn.dropdown-toggle {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    height: 54px;
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    font-size: 20px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
}

.profile-language-dropdown .pagination-btn.dropdown-toggle:hover {
    border-color: #e0e0e0;
}

.profile-language-dropdown .pagination-dropdown-menu {
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
}

.form-input {
    width: 100%;
    padding: 14px 20px;
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    
    font-size: 16px;
    font-weight: 500;
    color: #3c3c3c;
    font-family: "Montserrat", sans-serif;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.form-input:hover {
    border-color: #bababa;
}

.form-input:focus {
    outline: none;
    border-color: #3c3c3c;
    background: #ffffff;
}

.form-input.error {
    border-color: #ff4d4f !important;
    border-style: dashed !important;
    background: #fff1f0 !important;
}

.form-input.success {
    border-color: #52c41a !important;
    border-style: dashed !important;
    background: #ffffff !important;
}

/* .form-input-readonly: sem estilo próprio — é um dos gatilhos do padrão
   oficial de campo desabilitado (ver bloco PADRÃO OFICIAL mais abaixo). */

.form-input::placeholder {
    color: #9a9a9a;
    font-weight: 500;
}

select.form-input {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

.password-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}


.password-field-wrapper .form-input {
    flex: 1;
    width: 100%;
    padding-right: 44px;
}

.password-toggle-btn {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9a9a9a;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    margin-right: 5px;
    
}

.password-toggle-btn:hover {
    background: #fafafa;
}

.password-toggle-btn svg {
    width: 20px;
    height: 20px;
    stroke: #9a9a9a;
    transition: stroke 0.15s ease;
}

.password-toggle-btn:hover svg {
    stroke: #3c3c3c;
}


.member-role-dropdown {
    min-width: 0;
    position: relative;
}

.member-role-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    color: #9a9a9a;
    font-weight: 500;
    overflow: hidden;
}

.member-role-btn > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.member-role-btn.has-value {
    color: #3c3c3c;
}

.member-role-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══ PADRÃO OFICIAL DE CAMPO DESABILITADO (label + input + hint) ═══════════
   Campo desabilitado = wrapper .login-field inteiro: cursor proibido em toda a
   área, label/hint/input apagados (opacity .4), input com bg #f5f5f5, sem
   clique e sem seleção de texto. Dispara por QUALQUER um dos gatilhos:
   1) manual:     classe .login-field-disabled no wrapper
   2) automático: input/botão :disabled dentro do wrapper
   3) readonly:   classe .form-input-readonly no input travado
   Não criar variações locais por modal — usar sempre um destes gatilhos. */

:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > .login-label,
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > .field-hint {
    opacity: 0.4;
}

:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > .login-input,
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > .form-input,
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > div > .login-input,
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > div > .form-input {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f5f5f5;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) :is(.login-input, .form-input):hover,
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) :is(.login-input, .form-input):focus {
    border-color: #e0e0e0;
    background: #f5f5f5;
    outline: none;
}

/* cursor proibido no wrapper cobre inputs com pointer-events:none */
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)),
:is(.login-field-disabled,
    .login-field:has(.form-input:disabled, .login-input:disabled, .form-input-readonly)) > div {
    cursor: not-allowed;
}

.member-role-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 2px dashed #e0e0e0;
    
    z-index: 999;
    max-height: 240px;
    overflow-y: auto;
}

.member-role-menu.show {
    display: block;
}

/* Variante do menu que hospeda um calendário (date-picker) em vez de items.
   Remove o limite de altura/scroll dos items e dá respiro interno ao calendário.
   Herda a largura do input (100% via .member-role-menu); os dias preenchem essa
   largura de forma responsiva. Escopado: não afeta os date-pickers standalone
   (modal_date_select / sales). */
.member-role-menu-calendar {
    max-height: none;
    overflow: visible;
    padding: 12px;
}
.member-role-menu-calendar .date-picker {
    gap: 8px;
}
/* Dias e cabeçalho responsivos: 7 colunas iguais que preenchem a largura do dropdown
   (que acompanha o input). Altura fixa para não espremer com aspect-ratio. */
.member-role-menu-calendar .date-picker-grid,
.member-role-menu-calendar .date-picker-weekdays {
    grid-template-columns: repeat(7, 1fr);
}
.member-role-menu-calendar .date-picker-day {
    width: auto;
    aspect-ratio: auto;
    height: 36px;
}
.member-role-menu-calendar .date-picker-weekdays > span {
    text-align: center;
}

.member-role-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #3c3c3c;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    transition: background 0.1s ease;
    user-select: none;
}

.member-role-item:hover {
    background: #f5f5f5;
}

.role-check {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.role-check svg {
    display: none;
}

.member-role-item.selected .role-check {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #1a6fa8;
}

.member-role-item.selected .role-check svg {
    display: block;
}

/* Radio visual para dropdowns de seleção única */
.single-select-menu .role-check {
    border-radius: 50%;
}

.single-select-menu .member-role-item.selected .role-check {
    background: #e6f7ff;
    border-color: #91d5ff;
}

.single-select-menu .member-role-item.selected .role-check svg {
    display: none;
}

.single-select-menu .member-role-item.selected .role-check::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a6fa8;
    display: block;
}

.member-role-item.selected {
    background: #f0f8ff;
    font-weight: 600;
    color: #1a6fa8;
}

/* Monitor, Manifesto, Diretor e Admin — tom dourado/âmbar */
.member-role-item[data-value="monitor"],
.member-role-item[data-value="manifest"],
.member-role-item[data-value="director"],
.member-role-item[data-value="admin"] {
    color: #c0392b;
    font-weight: 600;
}

.member-role-item[data-value="monitor"].selected,
.member-role-item[data-value="manifest"].selected,
.member-role-item[data-value="director"].selected,
.member-role-item[data-value="admin"].selected {
    background: #fff0f0;
    color: #c0392b;
}

.member-role-item[data-value="monitor"].selected .role-check,
.member-role-item[data-value="manifest"].selected .role-check,
.member-role-item[data-value="director"].selected .role-check,
.member-role-item[data-value="admin"].selected .role-check {
    background: #ffd5d5;
    border-color: #e08080;
    color: #c0392b;
}

.member-role-item.role-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.profile-security-section {
    padding: 28px;
    background: #fafafa;
    border-top: 2px dashed #e0e0e0;
    border-bottom: 2px dashed #e0e0e0;
}

#profileModal .form-row > * {
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
    width: calc(50% - 8px);
}

.profile-alert-box {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 28px 28px 0 28px;
    padding: 12px 16px;
    border: 2px dashed transparent;
    font-size: 14px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    height: 54px;
    box-sizing: border-box;
}

.profile-alert-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.profile-alert-message {
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-alert-box.alert-info {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #0050b3;
}

.profile-alert-box.alert-success {
    background: #ebffcf;
    border-color: #48bb78;
    color: #22543d;
}

.profile-alert-box.alert-error {
    background: #ffe0e0;
    border-color: #ffb0b0;
    color: #d32f2f;
}

.profile-alert-box.alert-warning {
    background: #fff9e6;
    border-color: #fff9e6;
    color: #8b7500;
}

.profile-alert-box.alert-diff {
    background: #fff9e6;
    border: 2px dashed #f6ad55;
    color: #8b7500;
}

.profile-alert-box.alert-purple {
    background: #f3e8ff;
    border: 2px dashed #d8b4fe;
    color: #7c3aed;
}

.produto-structural-warning {
    display: none;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff9e6;
    border: 2px dashed #f6c94e;
    color: #8b7500;
    font-size: 13px;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
}


#memberModal.in-step .modal-footer {
    border-top: 1px solid #eee;
}

#profileModal .modal-footer,
#planeModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}

#planeModal.step-2 .modal-footer {
    border-top: 1px solid #eee;
}

#planeModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}
#planeModal .modal-body {
    flex: 1;
    overflow-y: auto;
}

#saleEditModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}
#saleEditModal.has-alert .modal-footer {
    border-top: none;
    padding-top: 16px;
}

#saleEditModal.step-2 .modal-footer {
}


#saleEditModal.step-delete .modal-footer {
    border-top: 1px solid #eee;
}

#saleEditModal .modal-btn-danger:disabled:hover {
    background: #fff1f0;
    border-color: #ffd1d1;
}

#novoProdutoModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}

#novoProdutoModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}

#novoProdutoModal .modal-body {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 28px;
}

#novoProdutoModal .form-row {
    gap: 0;
}

#novoProdutoModal .form-row .login-field {
    flex: 1;
    min-width: 0;
}

#novoProdutoModal .form-row .login-field:first-child {
    padding-right: 8px;
}

#novoProdutoModal .form-row .login-field:last-child {
    padding-left: 8px;
}

#novoProdutoModal .form-row .login-field:only-child {
    padding-left: 0;
    padding-right: 0;
}

#produtoEditFormModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}

#produtoEditFormModal.step-2 .modal-footer {
    border-top: 1px solid #eee;
}


#produtoEditFormModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}

#produtoEditFormModal .modal-body {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 24px;
}

#produtoEditFormModal .form-row {
    gap: 0;
}

.produto-delete-msg {
    font-size: 20px;
    color: rgb(130, 39, 39);
    margin: 0;
    line-height: 1.6;
    text-align: center;
    font-weight: 600;
}

.produto-delete-info {
    font-size: 20px;
    color: rgb(130, 39, 39);
    margin: 4px 0 0;
    line-height: 1.6;
    text-align: center;
    font-weight: 600;
}

#produtoEditFormModal .form-row .login-field {
    flex: 1;
    min-width: 0;
}

#produtoEditFormModal .form-row .login-field:first-child {
    padding-right: 8px;
}

#produtoEditFormModal .form-row .login-field:last-child {
    padding-left: 8px;
}

#produtoEditFormModal .form-row .login-field:only-child {
    padding-left: 0;
    padding-right: 0;
}

#paymentMethodEditFormModal .modal-footer,
#weightFeeEditFormModal .modal-footer,
#comissionEditFormModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}
#comissionEditModal .profile-avatar-container {
    cursor: not-allowed;
}
#comissionEditModal .profile-avatar-container:hover .avatar-overlay {
    opacity: 0;
}
#comissionEditModal .profile-avatar-container:hover .profile-avatar {
    opacity: 1;
}


#takeoffNewModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}

#takeoffEditModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}


#takeoffEditModal .profile-main-inputs {
    flex: 1;
    min-width: 0;
}

#takeoffEditModal .profile-main-inputs .form-row {
    gap: 16px;
}

#takeoffEditModal .profile-main-inputs .form-row > .login-field {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
}

/* Step 2: avatar quadrado com mesma altura dos 2 campos com label+hint */
#saleNewModal .profile-avatar-row .profile-avatar-container {
    width: 194px;
    height: 194px;
    flex-shrink: 0;
}

#saleNewModal .profile-avatar-row .profile-main-inputs {
    height: auto;
    flex: 1;
    min-width: 0;
}

/* Edit modal: avatar 194x194, inputs encolhem */
#saleEditModal .profile-avatar-container {
    width: 194px;
    height: 194px;
    flex-shrink: 0;
}

#saleEditModal .profile-main-inputs {
    height: auto;
    flex: 1;
    min-width: 0;
}

#saleNewModal.step-3 .modal-container {
    max-height: 700px;
    min-height: 653px;
    display: flex;
    flex-direction: column;
}

#saleNewModal.step-confirm .modal-container {
    min-height: 0;
}
#saleNewModal.step-confirm .modal-footer,
#saleNewModal.step-confirm.has-alert .modal-footer {
    padding-top: 28px;
}

#saleNewModal.step-3 .modal-body {
    overflow-y: auto;
    flex: 1;
}

#saleNewModal .sale-payment-row .member-role-menu.open-up {
    top: auto;
    bottom: calc(100% + 4px);
}
#saleNewModal .sale-pm-field-status .member-role-menu {
    min-width: 160px;
}

#saleNewModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}
#saleNewModal.has-alert .modal-footer {
    border-top: none;
    padding-top: 16px;
}
#saleNewModal.step-3 .modal-body {
    border-bottom: 1px solid #eee;
}

#paymentMethodNewModal .form-row > *,
#paymentMethodEditFormModal .form-row > *,
#weightFeeNewModal .form-row > *,
#weightFeeEditFormModal .form-row > *,
#comissionNewModal .form-row > *,
#comissionEditFormModal .form-row > *,
#takeoffNewModal .form-row > *,
#financesCategoryNewModal .form-row > *,
#financesCategoryEditModal .form-row > *,
#financesInvoiceNewModal .form-row > *,
#financesInvoiceEditModal .form-row > *,
#financesChargeNewModal .form-row > *,
#financesChargeEditModal .form-row > *,
#financesPaymentNewModal .form-row > * {
    flex: 0 0 calc(50% - 8px);
    min-width: 0;
    width: calc(50% - 8px);
}

#planeStatusModal .modal-footer,
#memberStatusModal .modal-footer,
#deleteConfirmModal .modal-footer {
    padding-top: 28px;
    justify-content: stretch;
}

#profileModal.has-alert .modal-footer,
#paymentMethodEditFormModal.has-alert .modal-footer,
#weightFeeEditFormModal.has-alert .modal-footer,
#saleEditModal.has-alert .modal-footer {
    padding-top: 16px;
}

#planeNewModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}
#planeNewModal .modal-body {
    border-bottom: 1px solid #eee;
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}

#planeNewModal .modal-footer {
    border-top: none;
    padding-top: 28px;
    flex-direction: column;
    align-items: stretch;
}

#comissionNewModal .modal-container,
#comissionEditModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}
#comissionNewModal .modal-body,
#comissionEditModal .modal-body {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}
#comissionNewModal .modal-footer {
    flex-direction: column;
    align-items: stretch;
}

#comissionEditModal .modal-footer {
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    padding-top: 28px;
}

#comissionEditModal.step-2 .modal-footer {
}

#fuelNewModal .modal-container,
#fuelEditModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}
#fuelNewModal .modal-body,
#fuelEditModal .modal-body {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}

#financesInvoiceNewModal .modal-container,
#financesInvoiceEditModal .modal-container,
#financesChargeNewModal .modal-container,
#financesChargeEditModal .modal-container,
#financesPaymentNewModal .modal-container {
    max-height: 700px;
    display: flex;
    flex-direction: column;
}
#financesInvoiceNewModal .modal-body,
#financesInvoiceEditModal .modal-body,
#financesChargeNewModal .modal-body,
#financesChargeEditModal .modal-body,
#financesPaymentNewModal .modal-body {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}


.modal-footer .modal-btn {
    flex: 1;
    text-align: center;
}

.modal-btn-cancel {
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
}

.modal-btn-cancel:hover {
    background: #ececec;
    border-color: #bababa;
}

.modal-btn-save,
.modal-btn-next {
    background: #ebffcf;
    border: 2px dashed #a5ee70;
    color: #22543d;
}

.modal-btn-save:hover,
.modal-btn-next:hover {
    background: #d6ffb3;
    border-color: #38a169;
}

.modal-btn-save:disabled,
.modal-btn-next:disabled {
    background: #f5f5f5;
    border-color: #d9d9d9;
    color: #bfbfbf;
    cursor: not-allowed;
    pointer-events: all;
}

#planeStatusModal .tag-badge,
#memberStatusModal .tag-badge { font-size: 16px; text-transform: uppercase; }

#profileModal .modal-btn-danger,
#memberStatusModal .modal-btn-danger,
#planeStatusModal .modal-btn-danger,
#planeModal .modal-btn-danger,
#deleteConfirmModal .modal-btn-danger,
#saleEditModal .modal-btn-danger,
#slotDeleteModal .modal-btn-danger,
#takeoffEditModal .modal-btn-danger,
#produtoEditFormModal .modal-btn-danger,
#confirmProductDeleteModal .modal-btn-danger,
#comissionEditModal .modal-btn-danger,
#paymentMethodEditFormModal .modal-btn-danger,
#fuelEditModal .modal-btn-danger,
#hangarEditModal .modal-btn-danger,
#noteDeleteModal .modal-btn-danger,
#balanceEditModal .modal-btn-danger,
#balanceZeroModal .modal-btn-danger,
#financesCategoryEditModal .modal-btn-danger,
#financesInvoiceEditModal .modal-btn-danger,
#financesChargeEditModal .modal-btn-danger,
#financesPaymentReverseModal .modal-btn-danger {
    background: #fff1f0;
    border: 2px dashed #ffd1d1;
    color: #822727;
}

#profileModal .modal-btn-danger:disabled,
#memberStatusModal .modal-btn-danger:disabled,
#planeStatusModal .modal-btn-danger:disabled,
#planeModal .modal-btn-danger:disabled,
#deleteConfirmModal .modal-btn-danger:disabled,
#saleEditModal .modal-btn-danger:disabled,
#slotDeleteModal .modal-btn-danger:disabled,
#takeoffEditModal .modal-btn-danger:disabled,
#produtoEditFormModal .modal-btn-danger:disabled,
#confirmProductDeleteModal .modal-btn-danger:disabled,
#comissionEditModal .modal-btn-danger:disabled,
#paymentMethodEditFormModal .modal-btn-danger:disabled,
#fuelEditModal .modal-btn-danger:disabled,
#hangarEditModal .modal-btn-danger:disabled,
#noteDeleteModal .modal-btn-danger:disabled,
#balanceEditModal .modal-btn-danger:disabled,
#balanceZeroModal .modal-btn-danger:disabled,
#financesCategoryEditModal .modal-btn-danger:disabled,
#financesInvoiceEditModal .modal-btn-danger:disabled,
#financesChargeEditModal .modal-btn-danger:disabled,
#financesPaymentReverseModal .modal-btn-danger:disabled {
    background: #f5f5f5;
    border-color: #d9d9d9;
    color: #bfbfbf;
    cursor: not-allowed;
    pointer-events: all;
}

#profileModal .modal-btn-danger:disabled:hover,
#memberStatusModal .modal-btn-danger:disabled:hover,
#planeStatusModal .modal-btn-danger:disabled:hover,
#planeModal .modal-btn-danger:disabled:hover,
#deleteConfirmModal .modal-btn-danger:disabled:hover,
#saleEditModal .modal-btn-danger:disabled:hover,
#slotDeleteModal .modal-btn-danger:disabled:hover,
#takeoffEditModal .modal-btn-danger:disabled:hover,
#produtoEditFormModal .modal-btn-danger:disabled:hover,
#confirmProductDeleteModal .modal-btn-danger:disabled:hover,
#comissionEditModal .modal-btn-danger:disabled:hover,
#paymentMethodEditFormModal .modal-btn-danger:disabled:hover,
#fuelEditModal .modal-btn-danger:disabled:hover,
#hangarEditModal .modal-btn-danger:disabled:hover,
#noteDeleteModal .modal-btn-danger:disabled:hover,
#balanceEditModal .modal-btn-danger:disabled:hover,
#balanceZeroModal .modal-btn-danger:disabled:hover,
#financesCategoryEditModal .modal-btn-danger:disabled:hover,
#financesInvoiceEditModal .modal-btn-danger:disabled:hover,
#financesChargeEditModal .modal-btn-danger:disabled:hover,
#financesPaymentReverseModal .modal-btn-danger:disabled:hover {
    background: #f5f5f5 !important;
    border-color: #d9d9d9 !important;
}

#profileModal .modal-btn-danger:not(:disabled):hover,
#memberStatusModal .modal-btn-danger:not(:disabled):hover,
#planeStatusModal .modal-btn-danger:not(:disabled):hover,
#planeModal .modal-btn-danger:not(:disabled):hover,
#deleteConfirmModal .modal-btn-danger:not(:disabled):hover,
#saleEditModal .modal-btn-danger:not(:disabled):hover,
#slotDeleteModal .modal-btn-danger:not(:disabled):hover,
#takeoffEditModal .modal-btn-danger:not(:disabled):hover,
#produtoEditFormModal .modal-btn-danger:not(:disabled):hover,
#confirmProductDeleteModal .modal-btn-danger:not(:disabled):hover,
#comissionEditModal .modal-btn-danger:not(:disabled):hover,
#paymentMethodEditFormModal .modal-btn-danger:not(:disabled):hover,
#fuelEditModal .modal-btn-danger:not(:disabled):hover,
#hangarEditModal .modal-btn-danger:not(:disabled):hover,
#noteDeleteModal .modal-btn-danger:not(:disabled):hover,
#balanceEditModal .modal-btn-danger:not(:disabled):hover,
#balanceZeroModal .modal-btn-danger:not(:disabled):hover,
#financesCategoryEditModal .modal-btn-danger:not(:disabled):hover,
#financesInvoiceEditModal .modal-btn-danger:not(:disabled):hover,
#financesChargeEditModal .modal-btn-danger:not(:disabled):hover,
#financesPaymentReverseModal .modal-btn-danger:not(:disabled):hover {
    background: #ffc8c8;
    border-color: #ff7d7d;
}
.step-deleted-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.step-deleted-msg {
    font-size: 18px;
    color: #d32f2f;
    margin: 0;
    text-align: center;
}

#planeModal .modal-btn-danger:disabled:hover {
    background: #fff1f0;
    border-color: #ffd1d1;
}

#produtoEditFormModal .modal-btn-danger:disabled:hover {
    background: #fff1f0;
    border-color: #ffd1d1;
}

#takeoffEditModal .profile-avatar-container:hover .avatar-overlay {
    opacity: 0;
}

#takeoffEditModal .profile-avatar-container:hover .profile-avatar {
    opacity: 1;
}

#takeoffNewModal .profile-avatar-container:hover .avatar-overlay {
    opacity: 0;
}

#takeoffNewModal .profile-avatar-container:hover .profile-avatar {
    opacity: 1;
}

/* ── Takeoff cards: foto da aeronave ── */
.takeoff-aircraft-thumb {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden;
}
.takeoff-aircraft-thumb img {
    width: 85px;
    height: 85px;
    object-fit: cover;
    display: block;
}

/* ============================================================
   TAKEOFF CARDS — border por status
   ============================================================ */

.takeoff-card.takeoff-status-scheduled { box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; -webkit-box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; -moz-box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; }
.takeoff-card.takeoff-status-in_flight { box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; -webkit-box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; -moz-box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; }
.takeoff-card.takeoff-status-completed { box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; -webkit-box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; -moz-box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2) !important; }

/* ── Takeoff cards: avatar-num, yellow-btn, ribbon por status ── */

/* scheduled */
.takeoff-card.takeoff-status-scheduled .page-avatar-num { border: 0px !important; color: #333333 !important; }
.takeoff-card.takeoff-status-scheduled .yellow-btn       { border-color: #e0e0e0 !important; color: #333333 !important; background: #fafafa !important; }
.takeoff-card.takeoff-status-scheduled .category-ribbon  { border: 2px dashed #e0e0e0 !important; color: #333333 !important; background: #fafafa !important; }

/* in_flight */
.takeoff-card.takeoff-status-in_flight .page-avatar-num { border: 0px !important; color: #1a6fa8 !important; background: #e6f7ff !important; }
.takeoff-card.takeoff-status-in_flight .yellow-btn       { border-color: #91d5ff !important; color: #1a6fa8 !important; background: #e6f7ff !important; }
.takeoff-card.takeoff-status-in_flight .category-ribbon  { border: 2px dashed #91d5ff !important; color: #1a6fa8 !important; background: #e6f7ff !important; }

/* completed */
.takeoff-card.takeoff-status-completed .page-avatar-num { border: 0px !important; color: #08662e !important; background: #ebffcf !important; }
.takeoff-card.takeoff-status-completed .yellow-btn       { border-color: #48bb78 !important; color: #08662e !important; background: #ebffcf !important; }
.takeoff-card.takeoff-status-completed .category-ribbon  { border: 2px dashed #a5ee70 !important; color: #08662e !important; background: #ebffcf !important; }

/* ── Takeoff cards: text colors por status ── */
.takeoff-card.takeoff-status-scheduled .page-name-text,
.takeoff-card.takeoff-status-scheduled .page-name-btn svg,
.takeoff-card.takeoff-status-scheduled .page-niche,
.takeoff-card.takeoff-status-scheduled .page-age { color: #333333 !important; }

.takeoff-card.takeoff-status-in_flight .page-name-text,
.takeoff-card.takeoff-status-in_flight .page-name-btn svg,
.takeoff-card.takeoff-status-in_flight .page-niche,
.takeoff-card.takeoff-status-in_flight .page-age { color: #333333 !important; }

.takeoff-card.takeoff-status-completed .page-name-text,
.takeoff-card.takeoff-status-completed .page-name-btn svg,
.takeoff-card.takeoff-status-completed .page-niche,
.takeoff-card.takeoff-status-completed .page-age { color: #333333 !important; }

.takeoff-card .page-name-text { font-size: 20px; font-weight: 600; }

.table-section-title .page-name-text { font-size: 20px; font-weight: 600; color: #333333 !important; }
.table-section-title .page-name-btn svg { color: #333333 !important; }

/* ── Takeoff cards: rarity-badge por status ── */
.takeoff-card.takeoff-status-scheduled .rarity-badge { background: #fafafa !important; border: 2px dashed #e0e0e0 !important; color: #333333 !important; }
.takeoff-card.takeoff-status-in_flight .rarity-badge { background: #e6f7ff !important; color: #1a6fa8 !important; }
.takeoff-card.takeoff-status-completed .rarity-badge { background: #ebffcf !important; border: 2px dashed #a5ee70 !important; color: #08662e !important; }


/* ── Takeoff cards: centralizar ícone SVG no ribbon ── */
.takeoff-card .category-ribbon { display: flex; align-items: center; justify-content: center; min-height: 38px; }
.takeoff-card .category-ribbon .icon_ribbon { display: none; }
.takeoff-card .category-ribbon .icon_ribbon svg { display: block; }

/* ── Takeoff cards: piscar ícone ribbon em todos os status ── */
.takeoff-card .category-ribbon .icon_ribbon svg { animation: blink 2s ease-in-out infinite; }

/* ── Takeoff cards: rotate ícone ribbon ── */
.takeoff-card .category-ribbon .icon_ribbon svg { transform: rotate(-45deg); }

/* ── Takeoff cards: grupo de slots por venda ── */
.info2-group {
    align-items: stretch;
    padding-bottom: 0;
}
.info2-group + .info2-group {
    padding-top: 0;
    margin-top: 16px;
}
.info2-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0;
}
.info2-notes {
    width: 100%;
    margin: 0 0 16px 0;
    padding: 10px 14px;
    background: #fff9e6;
    box-sizing: border-box;
}
.info2-rows {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 16px;
}
.info2-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* ── Takeoff cards: badges de content ── */
.takeoff-badge-key {
    flex: 0 0 calc(35% - 19px);
    white-space: nowrap;
    padding: 10px 18px;
    background: #fafafa;
    border: 2px solid #fafafa;
    color: #666666;
    height: 38px;
    line-height: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.takeoff-badge-val {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 18px;
    background: #fafafa;
    border: 2px solid #fafafa;
    color: #666666;
    text-decoration: none;
    height: 38px;
    line-height: 18px;
    font-size: 15px;
    display: block;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.takeoff-badge-val-link:hover {
    background: #e6f7ff !important;
    border-color: #91d5ff !important;
    border-style: dashed !important;
    color: #3c3c3c !important;
    cursor: pointer;
}
.takeoff-badge-delete {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;

    background: #fff1f0;
    border: 2px dashed #ffd1d1;
    color: #a8071a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.takeoff-badge-delete:hover { background: #ffc8c8; border: 2px dashed #ff7d7d; }
.info2-group:has(.takeoff-badge-delete:hover) .takeoff-badge-key,
.info2-group:has(.takeoff-badge-delete:hover) .takeoff-badge-val {
    background: #fff1f0 !important;
    border: 2px dashed #ffd1d1 !important;
    color: #a8071a !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.info-avatars {
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 0;
    align-items: center;
}
.takeoff-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 0;
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.takeoff-user-avatar:hover {
    transform: scale(1.1);
}

.takeoff-notes-block {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 10px 14px;
    background: #f3e8ff;
    border: 2px dashed #d8b4fe;
    font-weight: 600;
    color: #7c3aed;
    font-size: 14px;
}
.info-separator {
    color: #333333 !important;
    font-size: 15px;
}
.info-separator::before {
    content: '—';
    margin: 0 12px;
}

.date-dot {
    margin: 0 2px;
}

.user-notes-block {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 32px;
    padding: 10px 14px;
    background: #f3e8ff;
    border: 2px dashed #d8b4fe;
    font-weight: 600;
    color: #7c3aed;
    font-size: 14px;
}
.aircraft-notes-block {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 32px;
    padding: 10px 14px;
    background: #f3e8ff;
    border: 2px dashed #d8b4fe;
    font-weight: 600;
    color: #7c3aed;
    font-size: 14px;
}
.info2-group > .takeoff-badge-delete {
    align-self: flex-start;
}

/* ── Sale New Modal ────────────────────────────────────────────────────────── */
#saleNewModal .sale-pm-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff1f0;
    border: none;
    color: #a8071a;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 2px;
    transition: background 0.15s;
}
#saleNewModal .sale-pm-remove:hover { background: #ffc8c8; }
#saleNewModal .form-row .member-role-dropdown { width: 100%; }
#saleNewPaymentRows { display: flex; flex-direction: column; gap: 16px; }
#saleNewModal .sale-payment-ghost {
    display: flex;
    align-items: center;
    gap: 16px;
}

#saleNewModal .sale-payment-row ~ .sale-payment-ghost {
}
#saleNewModal .sale-payment-ghost > .login-field {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
#saleNewModal .sale-payment-ghost > .sale-ghost-btn {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
}

/* Proporções dos campos dentro de cada row de pagamento */
#saleNewModal .sale-payment-row > .sale-pm-field-method,
#saleNewModal .sale-payment-ghost > .sale-pm-field-method {
    flex: 1.5 1 0;
    min-width: 0;
}
#saleNewModal .sale-payment-row > .sale-pm-field-value,
#saleNewModal .sale-payment-ghost > .sale-pm-field-value {
    flex: 1 1 0;
    min-width: 0;
}
#saleNewModal .sale-payment-row > .sale-pm-field-status,
#saleNewModal .sale-payment-ghost > .sale-pm-field-status {
    flex: 0 0 160px;
    width: 160px;
    min-width: 0;
}
.sale-ghost-label {
    height: 15px;
    background: #f0f0f0;
    width: 60%;
    margin-bottom: 8px;
}
.sale-ghost-input {
    height: 52px;
    background: #f5f5f5;
    box-sizing: border-box;
    width: 100%;
}

.sale-payment-ghost.error .sale-ghost-input {
    background: #fff1f0;
    border: 2px dashed #ff4d4f;
}
.sale-ghost-hint {
    display: none;
}
.sale-ghost-btn {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    background: #ebffcf;
    border: none;
    border-radius: 0;
    color: #22543d;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.sale-ghost-btn:hover {
    background: #d6ffb3;
}

#saleNewModal .sale-payment-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
#saleNewModal .sale-payment-row .sale-pm-btn,
#saleEditModal .sale-payment-row .sale-pm-btn {
    color: #3c3c3c;
}
#saleNewModal .sale-payment-row > .login-field:not(.sale-pm-field-method):not(.sale-pm-field-value):not(.sale-pm-field-status) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
#saleNewModal .sale-payment-row > .badge-delete {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff1f0;
    border: none;
    border-radius: 0;
    color: #a8071a;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
#saleNewModal .sale-payment-row > .badge-delete:hover { background: #ffc8c8; }

/* ── Partner Values Row (abaixo do ghost) ───────────────────────────────────── */
#saleNewModal .sale-partner-values-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 8px -28px 8px -28px;
}
/* Grid: parceiro | valor | status(160px) | badge(52px) */
#saleNewModal .sale-partner-values-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 160px 52px;
    gap: 16px;
    align-items: end;
}
/* row de desconto: parceiro ocupa colunas 1+2, valor fica fixo na coluna 3 */
#saleNewModal .pv-row-desconto > .partner-value-field:nth-child(1) {
    grid-column: 1 / 3;
}
#saleNewModal .sale-partner-values-row > .partner-value-badge-reset {
    grid-column: 4;
}
#saleNewModal .partner-value-badge-reset {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: none;
    border-radius: 0;
    color: #3c3c3c;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
#saleNewModal .partner-value-badge-reset:hover { background: #ececec; }

/* Estado "default" da primeira payment row — opacity removida, sempre visível */

/* Campo não-editável das rows de parceiro: usa o padrão oficial de campo
   desabilitado (.login-field-disabled no wrapper — ver bloco PADRÃO OFICIAL). */

/* ── DISABLED EDITÁVEL: sem bg, só apagado visualmente ───────────────────── */
#saleNewModal .pv-row-comissao > .partner-value-field:not(:first-child).pv-field-muted .login-label,
#saleNewModal .pv-row-comissao > .partner-value-field:not(:first-child).pv-field-muted .field-hint,
#saleNewModal .pv-row-comissao > .partner-value-field:not(:first-child).pv-field-muted .form-input:not(.member-role-btn),
#saleEditModal .pv-row-comissao > .partner-value-field:not(:first-child).pv-field-muted .login-label,
#saleEditModal .pv-row-comissao > .partner-value-field:not(:first-child).pv-field-muted .field-hint,
#saleEditModal .pv-row-comissao > .partner-value-field:not(:first-child).pv-field-muted .form-input:not(.member-role-btn) {
    opacity: 0.4;
}


/* Estado "default" row comissão — opacity removida, sempre visível */

/* ── Sale Edit Modal ────────────────────────────────────────────────────────── */
#saleEditStep1 > .login-field { margin-bottom: 0; gap: 6px; margin-top: 16px; }
#saleEditStep1 .form-input[data-placeholder]:empty::before { content: attr(data-placeholder); color: #aaa; }
#saleEditClientNotesText[data-placeholder]:empty::before { content: attr(data-placeholder); color: #3c3c3c; }
#saleEditModal .form-row .member-role-dropdown { width: 100%; }
#saleEditPaymentRows { display: flex; flex-direction: column; gap: 16px; }
#saleEditModal .sale-payment-ghost {
    display: flex;
    align-items: center;
    gap: 16px;
}
#saleEditModal .sale-payment-row ~ .sale-payment-ghost {
}
#saleEditModal .sale-payment-ghost > .login-field {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
#saleEditModal .sale-payment-ghost > .sale-ghost-btn {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    margin-top: 4px;
}
#saleEditModal .sale-payment-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
}
#saleEditModal .sale-payment-row > .login-field:not(.sale-pm-field-method):not(.sale-pm-field-value):not(.sale-pm-field-status) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

/* Proporções dos campos dentro de cada row de pagamento */
#saleEditModal .sale-payment-row > .sale-pm-field-method,
#saleEditModal .sale-payment-ghost > .sale-pm-field-method {
    flex: 1.5 1 0;
    min-width: 0;
}
#saleEditModal .sale-payment-row > .sale-pm-field-value,
#saleEditModal .sale-payment-ghost > .sale-pm-field-value {
    flex: 1 1 0;
    min-width: 0;
}
#saleEditModal .sale-payment-row > .sale-pm-field-status,
#saleEditModal .sale-payment-ghost > .sale-pm-field-status {
    flex: 0 0 160px;
    width: 160px;
    min-width: 0;
}
#saleEditModal .sale-pm-field-status .member-role-menu {
    min-width: 160px;
}
#saleEditModal .sale-payment-row > .badge-delete {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff1f0;
    border: none;
    border-radius: 0;
    color: #a8071a;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
#saleEditModal .sale-payment-row > .badge-delete:hover { background: #ffc8c8; }
#saleEditModal .sale-payment-row .member-role-menu.open-up {
    top: auto;
    bottom: calc(100% + 4px);
}

/* ── Partner Values Row (step 3) ─────────────────────────────────────────────── */
#saleEditModal .sale-partner-values-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 8px -28px 8px -28px;
}
/* Grid: parceiro | valor | status(160px) | badge(52px) */
#saleEditModal .sale-partner-values-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 160px 52px;
    gap: 16px;
    align-items: end;
}
/* row de desconto: parceiro ocupa colunas 1+2, valor fica fixo na coluna 3 */
#saleEditModal .pv-row-desconto > .partner-value-field:nth-child(1) {
    grid-column: 1 / 3;
}
#saleEditModal .sale-partner-values-row > .partner-value-badge-reset {
    grid-column: 4;
}
#saleEditModal .partner-value-badge-reset {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: none;
    border-radius: 0;
    color: #3c3c3c;
    cursor: pointer;
    margin-bottom: 16px;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}
#saleEditModal .partner-value-badge-reset:hover { background: #ececec; }


/* ============================================================
   DATE PICKER (modal_date_select)
   ============================================================ */
.date-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.date-picker-header {
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    align-items: center;
    gap: 6px;
}

.date-picker-nav {
    width: 100%;
    aspect-ratio: 3;
    height: auto;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
    box-sizing: border-box;
}

.date-picker-nav:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border-color: #91d5ff;
}

.date-picker-nav:active {
    transform: translateY(0);
}

.date-picker-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #3c3c3c;
    letter-spacing: 0.5px;
}

.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #9a9a9a;
    text-align: center;
    letter-spacing: 0.5px;
}

.date-picker-weekdays > span {
    padding: 6px 0;
}

.date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.date-picker-day {
    aspect-ratio: 3;
    background: #fafafa;
    border: 2px dashed #e0e0e0;
    color: #3c3c3c;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-sizing: border-box;
    user-select: none;
    position: relative;
}

.date-picker-dot {
    width: 7px;
    height: 7px;
    background: #91d5ff !important;
    border-radius: 50%;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    pointer-events: none;
}

.date-picker-day:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border-color: #91d5ff;
}

.date-picker-day:active {
    transform: translateY(0);
}

.date-picker-day.other-month {
    opacity: 0.3;
}

/* HOJE: destacado em verde ao abrir o modal, sem iniciar o range. É apenas
   indicativo — o primeiro clique do usuário é quem começa a seleção. Quando o
   dia entra de fato num range (.in-range), aquela regra prevalece. */
.date-picker-day.today {
    background: #ebffcf;
    border-color: #a5ee70;
    color: #08662e;
}
.date-picker-day.today:hover {
    background: #d6ffb3;
    border-color: #38a169;
    color: #08662e;
}

.date-picker-day.selected {
    background: #ebffcf;
    border-color: #a5ee70;
    color: #08662e;
}

.date-picker-day.selected:hover {
    background: #d6ffb3;
    border-color: #38a169;
    color: #08662e;
}

/* Range (modal de data do Sales): todos os dias entre as duas pontas, e as
   pontas, ficam com o mesmo verde uniforme (igual ao .selected). O preview
   (in-range-preview) é a "cobra" que se forma no hover do início até o dia
   sob o cursor — mesma cor verde. */
.date-picker-day.in-range,
.date-picker-day.in-range-preview {
    background: #ebffcf;
    border-color: #a5ee70;
    color: #08662e;
}
.date-picker-day.in-range:hover,
.date-picker-day.in-range-preview:hover {
    background: #d6ffb3;
    border-color: #38a169;
    color: #08662e;
}

/* Dias fora da janela de 90 dias (após escolher o início): bloqueados. */
.date-picker-day.blocked {
    cursor: not-allowed;
    opacity: 0.35;
    pointer-events: auto; /* mantém o cursor not-allowed visível */
}
.date-picker-day.blocked:hover {
    transform: none;
    background: #fafafa;
    border-color: #e0e0e0;
}

/* ============================================================
   PRODUCT — Cards Cliente VIP / Observações
   ============================================================ */
#cardClienteVip,
#cardClienteVip2,
#cardClienteVip3,
#cardObservacoes {
    min-height: 0;
}

#cardClienteVip .card-header,
#cardClienteVip2 .card-header,
#cardClienteVip3 .card-header,
#cardClienteVip4 .card-header,
#cardClienteVip5 .card-header,
#cardClienteVip6 .card-header,
#cardObservacoes .card-header {
    align-items: center;
    margin-bottom: 0;
}

#cardClienteVip .page-avatar-num,
#cardClienteVip2 .page-avatar-num,
#cardClienteVip3 .page-avatar-num,
#cardClienteVip4 .page-avatar-num,
#cardClienteVip5 .page-avatar-num,
#cardClienteVip6 .page-avatar-num,
#cardObservacoes .page-avatar-num {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
}

#cardClienteVip .page-avatar-num svg,
#cardClienteVip2 .page-avatar-num svg,
#cardClienteVip3 .page-avatar-num svg,
#cardClienteVip4 .page-avatar-num svg,
#cardClienteVip5 .page-avatar-num svg,
#cardClienteVip6 .page-avatar-num svg,
#cardObservacoes .page-avatar-num svg {
    width: 42px;
    height: 42px;
}

#cardClienteVip2 .page-avatar-num img {
    width: 85px !important;
    height: 85px !important;
}

#cardClienteVip .page-details,
#cardClienteVip2 .page-details,
#cardClienteVip3 .page-details,
#cardClienteVip4 .page-details,
#cardClienteVip5 .page-details,
#cardClienteVip6 .page-details,
#cardObservacoes .page-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#cardClienteVip .page-name-text,
#cardClienteVip2 .page-name-text,
#cardClienteVip3 .page-name-text,
#cardClienteVip4 .page-name-text,
#cardClienteVip5 .page-name-text,
#cardClienteVip6 .page-name-text {
    font-weight: 600;
}

#cardClienteVip4,
#cardClienteVip5,
#cardClienteVip6 {
    min-height: 0;
}

#settingsContainer #cardClienteVip4 .license-status-ativa  { color: #48bb78 !important; font-weight: bold !important; }
#settingsContainer #cardClienteVip4 .license-status-expirada { color: #d32f2f !important; font-weight: bold !important; }


/* Alternância de colunas — adicione .col-stripe à <table> */
.col-stripe tbody td:nth-child(odd):not(.check-col):not(.actions-col)  { background-color: #fdfdfd; }
.col-stripe tbody td:nth-child(even):not(.check-col):not(.actions-col) { background-color: #ffffff; }
.col-stripe tbody td:nth-child(1):not(.check-col):not(.actions-col)    { background-color: #fdfdfd; }

/* Status dots da tabela de Vagas Usadas */
#listViewProducts .status-dot.in-use   { background: #4299e1 !important; animation: blink 2s ease-in-out infinite !important; }
#listViewProducts .status-pulse.in-use { border: 1px solid #4299e1 !important; animation: pulse 2s ease-out infinite !important; }

/* ── Modal header danger (apagar LO) ── */
.modal-header-danger {
    background: #fff1f0;
    border: 2px dashed #ffd1d1;
    color: #822727;
}

.modal-header-danger .modal-title {
    color: #822727;
}

.modal-header-danger .modal-close svg {
    color: #822727;
    fill: #822727;
}

.modal-header-danger .modal-close:hover {
    background: #ffd1d1;
    color: #822727;
}

.modal-header-danger .modal-close:active {
    background: #fff1f0 !important;
    color: #822727 !important;
}

.profile-security-section-danger {
    background: #fff1f0;
    border: 2px dashed #ffd1d1;
}

.profile-security-section-danger .form-input {
    border: 2px dashed #ffd1d1;
}

.profile-security-section-danger .form-input:hover,
.profile-security-section-danger .form-input:focus {
    border: 2px dashed #ffd1d1;
}

.profile-security-section-danger .form-input.error {
    background: #fff !important;
    border: 2px dashed #ff4d4f !important;
}

/* ── Checkbox estilo role-check com animação lift (etapa LO) ── */
.sc-lo-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: none;
    background: #fafafa;
    height: 48px;
    font-size: 15px;
    font-weight: 500;
    color: #3c3c3c;
    font-family: "Montserrat", sans-serif;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.sc-lo-checkbox:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
}

.sc-lo-checkbox:active {
    transform: translateY(0);
}

.sc-lo-checkbox.selected {
    background: #e6f7ff;
    color: #1a6fa8;
    font-weight: 600;
}

.sc-lo-checkbox.selected:hover {
    transform: translateY(-2px);
    background: #c3e3ff;
}

.sc-lo-checkbox.selected:active {
    transform: translateY(0);
}

.sc-lo-checkbox .role-check {
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.sc-lo-checkbox.selected .role-check {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #1a6fa8;
}

.sc-lo-checkbox .role-check svg {
    display: none;
}

.sc-lo-checkbox.selected .role-check svg {
    display: block;
}

/* ─── sc-lo-checkbox danger variant ───────────────────────────────────────── */
.sc-lo-checkbox-danger {
    background: #fff1f0;
    color: #822727;
}

.sc-lo-checkbox-danger:hover {
    background: #ffc8c8;
    color: #822727;
}

.sc-lo-checkbox-danger:active {
    background: #fff1f0;
}

.sc-lo-checkbox-danger.selected {
    background: #fff1f0;
    color: #822727;
}

.sc-lo-checkbox-danger.selected:hover {
    background: #ffc8c8;
    color: #822727;
}

.sc-lo-checkbox-danger.selected:active {
    background: #fff1f0;
}

.sc-lo-checkbox-danger .role-check {
    border-color: #ffd1d1;
    background: #fff;
}

.sc-lo-checkbox-danger:hover .role-check {
    background: #fff;
    border-color: #ff7d7d;
}

.sc-lo-checkbox-danger.selected .role-check {
    background: #fff1f0;
    border-color: #ff7d7d;
    color: #822727;
}


/* ─── altitude price field state ────────────────────────────────────────────── */
.altitude-price-row .alt-price-input,
.altitude-price-row .np-alt-price-input,
.altitude-price-row .login-field:has(.alt-price-input) .login-label,
.altitude-price-row .login-field:has(.alt-price-input) .field-hint,
.altitude-price-row .login-field:has(.np-alt-price-input) .login-label,
.altitude-price-row .login-field:has(.np-alt-price-input) .field-hint {
    opacity: 0.45;
    transition: opacity 0.15s;
}
.altitude-price-row .login-field.alt-price-active .alt-price-input,
.altitude-price-row .login-field.alt-price-active .np-alt-price-input,
.altitude-price-row .login-field.alt-price-active .login-label,
.altitude-price-row .login-field.alt-price-active .field-hint {
    opacity: 1;
}

/* ─── altitude-price-row: input fixo usa o padrão oficial de campo
   desabilitado (.login-field-disabled no wrapper — ver bloco PADRÃO OFICIAL) ── */

/* ─── sc-checkbox-icon: variante compacta sem texto (só o box) ─────────────── */
.sc-checkbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    background: #fafafa;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sc-checkbox-icon:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    border-color: #91d5ff;
}
.sc-checkbox-icon:active { transform: translateY(0); }
.sc-checkbox-icon.selected {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #1a6fa8;
}
.sc-checkbox-icon.selected:hover { background: #c3e3ff; }
.sc-checkbox-icon .role-check {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a6fa8;
}
.sc-checkbox-icon .role-check svg { display: none; }
.sc-checkbox-icon.selected .role-check svg { display: block; }

/* ─── Security Edit Modal ──────────────────────────────────────────────────── */
#secEditModal .modal-container {
    width: 500px;
    max-width: 92%;
}

#saleNewModal .partner-value-input:disabled,
#saleEditModal .partner-value-input:disabled,
/* Inputs de valor de parceiro desabilitados: cobertos pelo padrão oficial de
   campo desabilitado (gatilho automático :disabled — ver bloco PADRÃO OFICIAL). */

#secEditModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
}

#secEditModal .modal-footer {
    display: flex;
    gap: 16px;
    border-top: 1px solid #eee;
}

#secEditModal .modal-btn-cancel,
#secEditModal .modal-btn-save {
    flex: 1;
}



/* ─── Sale View Modal ─────────────────────────────────────────────────────── */
#saleViewModal .modal-body {
    padding: 28px;
    flex: 1;
}

#saleViewModal .profile-form .login-field {
    margin-bottom: 0;
    gap: 8px;
}

#saleViewModal .profile-avatar-container {
    width: 194px;
    height: 194px;
    flex-shrink: 0;
}

#saleViewModal .profile-main-inputs {
    height: auto;
    flex: 1;
    min-width: 0;
}

#saleViewModal .profile-avatar-container:hover .avatar-overlay {
    opacity: 0;
}

#saleViewModal .profile-avatar-container:hover .profile-avatar {
    opacity: 1;
}

/* Etapa de informações bloqueada do editar venda (Taxa de Manifesto já usada)
   e campos travados do editar opção (timezone): cobertos pelo padrão oficial
   de campo desabilitado (gatilho automático :disabled — ver bloco PADRÃO OFICIAL). */

/* ── Altitude price rows (produto edit step 1b) ─────────────────────────── */
.altitude-price-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.altitude-price-row:first-of-type { padding-top: 0; }
.altitude-price-row.alt-row-first { padding-top: 0; }
.altitude-price-row:last-child { border-bottom: none; padding-bottom: 0; }
.altitude-price-row.alt-row-last { border-bottom: none; padding-bottom: 0; }

.altitude-price-check {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.altitude-price-row .form-row {
    flex: 1;
    margin: 0;
    gap: 16px;
}
.altitude-price-row .login-field {
    flex: 1;
    margin: 0;
}

/* ─── Quill — tema do projeto ───────────────────────────────────────────────── */
#termosResponsabilidadeEditor { width: 100%; outline: none; }
#termosEditorWrapper { outline: none; }
#termosEditorWrapper [contenteditable] { outline: none !important; }
#termosEditorWrapper *:focus { outline: none !important; }
#termosEditorWrapper {
    box-shadow: 0px 0px 19px -13px rgba(0, 0, 0, 0.2);
}

#termosCustomToolbar {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fafafa;
    padding: 10px 16px;
    box-sizing: border-box;
}
#termosCustomToolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: #9a9a9a;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#termosCustomToolbar button svg {
    width: 18px;
    height: 18px;
}
#termosCustomToolbar button[data-action="h0"] svg,
#termosCustomToolbar button[data-action="h1"] svg,
#termosCustomToolbar button[data-action="h2"] svg,
#termosCustomToolbar button[data-action="h3"] svg {
    width: 16px;
    height: 16px;
}
#termosCustomToolbar button:hover {
    transform: translateY(-2px);
    background: #e6f7ff;
    color: #1a6fa8;
}
#termosCustomToolbar button:active {
    transform: translateY(0);
}
#termosCustomToolbar button.ql-active {
    color: #1a6fa8;
    background: #e6f7ff;
}

#termosResponsabilidadeEditor {
    background: #ffffff;
    border: none;
    border-bottom: 8px solid #F1F1F1;
    outline: none;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #3c3c3c;
    height: 360px;
    overflow-y: auto;
    padding: 32px;
    box-sizing: border-box;
    cursor: default;
}
#termosResponsabilidadeEditor[contenteditable="true"] {
    cursor: text;
}
#termosResponsabilidadeEditor p,
#termosResponsabilidadeEditor h1,
#termosResponsabilidadeEditor h2,
#termosResponsabilidadeEditor h3 {
    font-family: "Montserrat", sans-serif;
    color: #3c3c3c;
    margin: 0.4em 0;
}
#termosResponsabilidadeEditor h1 { font-size: 1.6em; font-weight: 700; }
#termosResponsabilidadeEditor h2 { font-size: 1.3em; font-weight: 700; }
#termosResponsabilidadeEditor h3 { font-size: 1.1em; font-weight: 700; }
#termosResponsabilidadeEditor ul,
#termosResponsabilidadeEditor ol { padding-left: 1.5em; margin: 0.4em 0; }
#termosResponsabilidadeEditor li { margin: 0.2em 0; }