/* =========================
   WRAPPER BASE
========================= */
.ge-wrapper {
    font-family: Arial, Helvetica, sans-serif;
    color: #eaeaea;
}

.ge-dark {
    background: #111;
    padding: 20px;
    border-radius: 8px;
}

/* =========================
   TÍTULOS
========================= */
.ge-wrapper h1,
.ge-wrapper h2,
.ge-wrapper h3 {
    color: #ffffff;
    margin-bottom: 15px;
}

/* =========================
   FORMULÁRIO
========================= */
.ge-wrapper label {
    color: #ccc;
    font-weight: 600;
}

.ge-wrapper input[type="text"],
.ge-wrapper input[type="number"],
.ge-wrapper select {
    background: #1e1e1e;
    border: 1px solid #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
}

.ge-wrapper input:focus,
.ge-wrapper select:focus {
    outline: none;
    border-color: #46b450;
}

/* =========================
   BOTÕES
========================= */
.ge-wrapper button {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.ge-wrapper button:hover {
    background: #3a3a3a;
}

.ge-wrapper .button-primary {
    background: #46b450;
    border-color: #46b450;
    color: #000;
}

.ge-wrapper .button-primary:hover {
    background: #3aa147;
}

/* =========================
   TABELAS
========================= */
.ge-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.ge-wrapper th {
    background: #1c1c1c;
    color: #ccc;
    padding: 8px;
    text-align: left;
}

.ge-wrapper td {
    background: #151515;
    padding: 8px;
    border-bottom: 1px solid #2a2a2a;
}

/* =========================
   ESTADOS (texto)
========================= */
.ge-wrapper strong {
    color: #fff;
}

/* =========================
   STATUS BOLINHA
========================= */
.ge-status {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-left: 8px;
}

.ge-vermelho { background: #dc3232; }
.ge-amarelo  { background: #ffb900; }
.ge-verde    { background: #46b450; }

/* =========================
   SELECT2 DARK MODE
========================= */
.ge-wrapper .select2-container--default .select2-selection--single {
    background: #1e1e1e;
    border: 1px solid #333;
    color: #fff;
    height: 38px;
}

.ge-wrapper .select2-selection__rendered {
    color: #fff !important;
    line-height: 38px !important;
}

.ge-wrapper .select2-selection__arrow {
    height: 36px;
}

.ge-wrapper .select2-dropdown {
    background: #1e1e1e;
    border: 1px solid #333;
}

.ge-wrapper .select2-results__option {
    color: #eee;
}

.ge-wrapper .select2-results__option--highlighted {
    background: #46b450;
    color: #000;
}
/* =========================
   SELECT2 - CAMPO DE PESQUISA (DARK FIX)
========================= */
.ge-wrapper .select2-search--dropdown .select2-search__field {
    background: #1e1e1e;
    color: #ffffff;
    border: 1px solid #333;
}

.ge-wrapper .select2-search--dropdown .select2-search__field::placeholder {
    color: #aaa;
}
.ge-wrapper .select2-search--dropdown .select2-search__field {
    background: #000;
    color: #0f0;
}
/* =================================================
   SELECT2 DARK MODE – FIX COMPLETO
================================================= */

/* Caixa principal */
.ge-wrapper .select2-container--default .select2-selection--single {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}

/* Texto selecionado */
.ge-wrapper .select2-container--default 
.select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}

/* Dropdown */
.ge-wrapper .select2-dropdown {
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
}

/* INPUT DE PESQUISA (O PROBLEMA PRINCIPAL) */
.ge-wrapper .select2-search--dropdown .select2-search__field {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

/* Placeholder do input */
.ge-wrapper .select2-search--dropdown 
.select2-search__field::placeholder {
    color: #aaa !important;
}

/* Texto “Please enter 2 or more characters” */
.ge-wrapper .select2-results__message {
    color: #ccc !important;
    background: #1e1e1e !important;
}

/* Opções */
.ge-wrapper .select2-results__option {
    background: #1e1e1e !important;
    color: #eee !important;
}

/* Hover / selecionado */
.ge-wrapper .select2-results__option--highlighted {
    background: #46b450 !important;
    color: #000 !important;
}

/* =================================================
   MOBILE DESIGN (SMARTPHONE)
================================================= */
/* =====================================
   MOBILE – DARK MODE LIMPO (B2B)
===================================== */
@media (max-width: 768px) {

    /* fundo geral */
    body,
    .ge-wrapper {
        background: #000;
        color: #fff;
    }

    .ge-wrapper {
        padding: 8px;
    }

    /* esconder cabeçalhos */
    .ge-wrapper table thead {
        display: none;
    }

    /* reset tabela */
    .ge-wrapper table,
    .ge-wrapper tbody,
    .ge-wrapper tr,
    .ge-wrapper td {
        display: block;
        width: 100%;
    }

    /* cartão */
    .ge-wrapper tr {
        background: #000;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 10px;
        box-shadow: none;
    }

    /* texto */
    .ge-wrapper td {
        border: none !important;
        padding: 4px 0;
        font-size: 14px;
        color: #fff;
    }

    /* labels */
    .ge-wrapper td[data-label]:before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: rgba(255,255,255,0.6);
        margin-bottom: 2px;
    }

    /* topo do cartão */
    .ge-wrapper tr > td:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    /* botões pequenos */
    .ge-wrapper button,
    .ge-wrapper .button {
        width: auto;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.4);
    }

    /* botão + maior */
    .ge-toggle {
        padding: 6px 14px !important;
        font-size: 22px;
        font-weight: bold;
        line-height: 1;
        border: 1px solid #fff;
    }

    /* botão anexo */
    .ge-wrapper a.button {
        padding: 4px 8px;
        font-size: 14px;
        border: 1px solid rgba(255,255,255,0.4);
    }

    /* status */
    .ge-status {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 6px;
    }

    /* inputs */
    .ge-wrapper select,
    .ge-wrapper input,
    .ge-wrapper textarea {
        width: 100%;
        padding: 6px;
        font-size: 14px;
        background: #000;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 4px;
    }

    /* observações */
    .ge-wrapper small em {
        font-size: 13px;
        color: rgba(255,255,255,0.75);
    }

    /* botões de ação */
    .ge-acao[data-acao="encomendar"],
    .ge-acao[data-acao="recebido"],
    .ge-enviar-fornecedor {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.4);
    }

    /* evitar scroll horizontal */
    .ge-wrapper {
        overflow-x: hidden;
    }
}

/* =====================================
   MOBILE – DARK MODE LIMPO (B2B)
===================================== */
@media (max-width: 768px) {

    /* fundo geral */
    body,
    .ge-wrapper {
        background: #000;
        color: #fff;
    }

    .ge-wrapper {
        padding: 8px;
    }

    /* esconder cabeçalhos */
    .ge-wrapper table thead {
        display: none;
    }

    /* reset tabela */
    .ge-wrapper table,
    .ge-wrapper tbody,
    .ge-wrapper tr,
    .ge-wrapper td {
        display: block;
        width: 100%;
    }

    /* cartão */
    .ge-wrapper tr {
        background: #000;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 10px;
        box-shadow: none;
    }

    /* texto */
    .ge-wrapper td {
        border: none !important;
        padding: 4px 0;
        font-size: 14px;
        color: #fff;
    }

    /* labels */
    .ge-wrapper td[data-label]:before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: rgba(255,255,255,0.6);
        margin-bottom: 2px;
    }

    /* topo do cartão */
    .ge-wrapper tr > td:first-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
    }

    /* botões pequenos */
    .ge-wrapper button,
    .ge-wrapper .button {
        width: auto;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 4px;
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.4);
    }

    /* botão + maior */
    .ge-toggle {
        padding: 6px 14px !important;
        font-size: 22px;
        font-weight: bold;
        line-height: 1;
        border: 1px solid #fff;
    }

    /* botão anexo */
    .ge-wrapper a.button {
        padding: 4px 8px;
        font-size: 14px;
        border: 1px solid rgba(255,255,255,0.4);
    }

    /* status */
    .ge-status {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 6px;
    }

    /* inputs */
    .ge-wrapper select,
    .ge-wrapper input,
    .ge-wrapper textarea {
        width: 100%;
        padding: 6px;
        font-size: 14px;
        background: #000;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 4px;
    }

    /* observações */
    .ge-wrapper small em {
        font-size: 13px;
        color: rgba(255,255,255,0.75);
    }

    /* botões de ação */
    .ge-acao[data-acao="encomendar"],
    .ge-acao[data-acao="recebido"],
    .ge-enviar-fornecedor {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.4);
    }

    /* evitar scroll horizontal */
    .ge-wrapper {
        overflow-x: hidden;
    }
}

/* =========================
   LINHA EXPANDIDA - FUNDO BRANCO
========================= */

/* =====================================
   APLICAR APENAS EM DESKTOP / TABLET
===================================== */
@media (min-width: 769px) {

    .ge-encomenda-detalhe td {
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Tabela interna */
    .ge-encomenda-detalhe table {
        background: #ffffff;
        color: #000000;
    }

    /* Cabeçalhos da tabela interna */
    .ge-encomenda-detalhe th {
        background: #f2f2f2;
        color: #000000;
    }

    /* Bordas mais suaves */
    .ge-encomenda-detalhe table,
    .ge-encomenda-detalhe th,
    .ge-encomenda-detalhe td {
        border-color: #cccccc;
    }
}
@media (max-width: 768px) {
    .ge-enviar-fornecedor {
        display: none !important;
    }
}

/* =====================================
   CORRIGIR SELECTS EM FUNDO ESCURO
===================================== */

.ge-wrapper select,
.ge-wrapper option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* melhorar aparência */
.ge-wrapper select {
    border: 1px solid #ccc;
    padding: 4px 6px;
    border-radius: 3px;
}

/* quando desativado */
.ge-wrapper select:disabled {
    background-color: #f1f1f1 !important;
    color: #666 !important;
}

/* =====================================
   CORRIGIR ESTADOS E AÇÕES (VISIBILIDADE)
===================================== */

/* Estado do produto (texto) */
.ge-wrapper td[data-estado] strong {
    color: #ffffff;
}

/* Datas (embaixo do estado) */
.ge-wrapper td[data-estado] small {
    color: rgba(255,255,255,0.7);
}

/* Estado CONCLUÍDO (texto fixo) */
.ge-wrapper td strong {
    color: #ffffff;
}

/* Ação "Concluído" */
.ge-wrapper td strong:only-child {
    color: #ffffff;
}

/* Garantir contraste quando fundo é claro (desktop) */
@media (min-width: 769px) {

    .ge-wrapper td[data-estado] strong,
    .ge-wrapper td strong {
        color: #000000;
    }

    .ge-wrapper td[data-estado] small {
        color: #555555;
    }
}

/* =====================================
   FIX FINAL – TEXTO "CONCLUÍDO" NA COLUNA AÇÕES
===================================== */

/* Mobile (dark) */
@media (max-width: 768px) {

    .ge-wrapper td strong {
        color: #ffffff !important;
    }
}

/* Desktop (claro) */
@media (min-width: 769px) {

    .ge-wrapper td strong {
        color: #000000 !important;
    }
}