/*
 * Estilos para o Portal Leônidas v3.2 (Correção HUD Flutuante e Modal)
 */

/* =============================================================
   01. VARIÁVEIS DE CORES (IDENTIDADE DOS SETORES)
============================================================= */
:root {
    --color-venda:          #f58220;
    --color-corte:          #ff0000;
    --color-impressao:      #d4af37;
    --color-personalizacao: #0000ff;
    --color-costura:        #990099;
    --color-conferencia:    #009933;
    --color-despacho:       #00ccff;
    
    --nc-brand: #f58220;
    --nc-text-dark: #0f172a;
    --nc-text-gray: #64748b;
    --nc-bg-silver: #f1f5f9;
}

/* =============================================================
   02. ESTRUTURA GERAL
============================================================= */
#leonidas-portal.ld-portal-layout {
    display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem;
    max-width: 1400px; margin: 2rem auto; font-family: 'Poppins', sans-serif;
}

#leonidas-portal .ld-portal-sidebar {
    background-color: var(--nc-brand); color: #fff; padding: 2.5rem;
    border-radius: 24px; display: flex; flex-direction: column;
}

#leonidas-portal .ld-user-profile {
    display: flex; align-items: center; gap: 1rem; padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#leonidas-portal .ld-user-icon {
    width: 48px; min-width: 48px; height: 48px; min-height: 48px;
    border-radius: 50%; background-color: #fff; color: var(--nc-brand);
    border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; flex-shrink: 0;
}
#leonidas-portal .ld-user-name { font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: #fff; }
#leonidas-portal .ld-user-role { font-size: 0.8rem; opacity: 0.8; color: #fff; text-transform: uppercase; }

#leonidas-portal .ld-sidebar-nav { margin-top: 2rem; }
#leonidas-portal .ld-sidebar-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
#leonidas-portal .ld-sidebar-nav li a {
    color: #fff; text-decoration: none; display: flex; align-items: center; gap: 1rem;
    padding: 1rem; border-radius: 10px; transition: background-color 200ms ease; font-weight: 600;
}
#leonidas-portal .ld-sidebar-nav li a:hover,
#leonidas-portal .ld-sidebar-nav li a.is-active { background-color: rgba(0, 0, 0, 0.1); }
#leonidas-portal .ld-sidebar-nav .dashicons { font-size: 1.5rem; }

/* TEMA SILVER */
.theme-silver .ld-portal-sidebar { background-color: #e2e8f0 !important; color: var(--nc-text-dark) !important; border: 1px solid #cbd5e1; }
.theme-silver .ld-sidebar-nav li a { color: var(--nc-text-gray) !important; }
.theme-silver .ld-sidebar-nav li a:hover, .theme-silver .ld-sidebar-nav li a.is-active { background-color: #cbd5e1 !important; color: var(--nc-text-dark) !important; }
.theme-silver .ld-user-profile { border-bottom: 1px solid #cbd5e1 !important; }
.theme-silver .ld-user-name { color: var(--nc-text-dark) !important; }
.theme-silver .ld-user-role { color: var(--nc-text-gray) !important; }
.theme-silver .ld-user-icon { background-color: #fff !important; color: var(--nc-text-gray) !important; border: 2px solid #94a3b8 !important; }
.theme-silver .logout-link { color: #ef4444 !important; }
.theme-silver .logout-link:hover { background-color: #fee2e2 !important; }

/* =============================================================
   03. ÁREA PRINCIPAL & HOME
============================================================= */
.ld-portal-layout.theme-silver { background-color: var(--nc-bg-silver); }
.theme-silver .ld-portal-main { background-color: transparent; padding-top: 0; }

#leonidas-portal .ld-main-header { margin-bottom: 2rem; }
#leonidas-portal #ld-add-new-sale-btn {
    background-color: #f3f4f6; color: #9ca3af; width: 100%;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 2rem; font-weight: 700;
    padding: 3rem; border-radius: 12px; text-decoration: none;
    transition: all 200ms ease;
}
#leonidas-portal #ld-add-new-sale-btn:hover { background-color: var(--nc-brand); color: #fff; }

#leonidas-portal .ld-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; }
.ld-main-grid.full-width { grid-template-columns: 1fr; }
.ld-recent-sales h2, .page-title { font-size: 2rem; color: var(--nc-text-dark); margin: 0 0 1.5rem 0; font-weight: 800; }

#leonidas-portal .ld-mini-panel { background-color: #f3f4f6; border: 3px solid #d1fae5; border-radius: 12px; padding: 1.5rem; height: fit-content; }
#leonidas-portal .ld-datetime { text-align: center; background-color: #fff; padding: 1.5rem; border-radius: 10px; margin-bottom: 1.5rem; }
#leonidas-portal .ld-date { display: block; font-weight: 700; font-size: 1.8rem; color: #10b981; }
#leonidas-portal .ld-time { display: block; font-size: 1.5rem; color: var(--nc-text-gray); margin-top: 0.25rem; }
.ld-order-search-wrapper .ld-form-label { text-transform: uppercase; font-weight: 700; font-size: 0.75rem; color: var(--nc-text-gray); margin-bottom: 0.5rem; display: block; }
.ld-order-search-wrapper .ld-form-input { width: 100%; padding: 1rem; border: 1px solid #d1d5db; background-color: #fff; border-radius: 8px; font-size: 1rem; }

/* =============================================================
   04. LISTA DE VENDAS (TABELA)
============================================================= */
.ld-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.btn-refresh { background: none; border: none; cursor: pointer; color: #94a3b8; transition: color 0.2s; }
.btn-refresh:hover { color: var(--nc-brand); }

.ld-list-titles { display: grid; grid-template-columns: 1.2fr 2fr 1.5fr 40px; padding: 0 1rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.5rem; }
.ld-list-titles span:nth-child(3) { text-align: right; padding-right: 10px; }

.ld-sale-row {
    display: grid; grid-template-columns: 1.2fr 2fr 1.5fr 40px; align-items: center;
    background-color: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 1rem; text-decoration: none; color: #334155; transition: all 0.2s ease; margin-bottom: 0.5rem;
}
.ld-sale-row:hover { transform: translateX(5px); border-color: var(--nc-brand); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.ld-col-id { display: flex; flex-direction: column; }
.ld-row-code { font-weight: 700; color: var(--nc-text-dark); font-size: 0.95rem; }
.ld-row-date { font-size: 0.75rem; color: #94a3b8; }
.ld-col-client { font-weight: 600; display: flex; align-items: center; gap: 5px; }
.ld-col-client .dashicons { color: #cbd5e1; }
.ld-col-status { text-align: right; padding-right: 10px; width: 100%; }
.ld-col-action { text-align: right; color: #cbd5e1; }
.ld-sale-row:hover .ld-col-action { color: var(--nc-brand); }

/* =============================================================
   05. BADGES
============================================================= */
.ld-status-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    padding: 4px 10px; border-radius: 12px; text-align: center; color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); white-space: nowrap;
}
.ld-badge-venda { background-color: var(--color-venda) !important; }
.ld-badge-corte { background-color: var(--color-corte) !important; }
.ld-badge-impressao { background-color: var(--color-impressao) !important; }
.ld-badge-personalizacao { background-color: var(--color-personalizacao) !important; }
.ld-badge-costura { background-color: var(--color-costura) !important; }
.ld-badge-conferencia { background-color: var(--color-conferencia) !important; }
.ld-badge-despacho { background-color: var(--color-despacho) !important; color: #000; text-shadow: none; }
.ld-badge-default { background-color: #94a3b8 !important; }

/* =============================================================
   06. FILTROS
============================================================= */
.ld-filter-header { background-color: #fff; padding: 2rem; border-radius: 16px; margin-bottom: 2rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.ld-filter-tabs { display: flex; gap: 1rem; border-bottom: 2px solid #e2e8f0; margin-bottom: 1.5rem; }
.filter-tab { background: none; border: none; padding: 1rem; font-weight: 600; color: #64748b; cursor: pointer; position: relative; }
.filter-tab.is-active { color: var(--nc-text-dark); }
.filter-tab.is-active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: var(--nc-text-dark); }
.ld-big-search, .ld-big-select { width: 100%; padding: 1rem; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.ld-status-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ld-status-chips span { padding: 0.6rem 1.2rem; background: #f1f5f9; border-radius: 50px; cursor: pointer; font-weight: 600; color: #64748b; transition: 0.2s; }
.ld-status-chips input:checked + span { background: var(--nc-text-dark); color: #fff; }

/* =============================================================
   07. LIGHTBOX & FORMULÁRIO (CORREÇÕES VISUAIS)
============================================================= */
.ld-lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(6px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.ld-lightbox-overlay.is-visible { opacity: 1; visibility: visible; }

.ld-lightbox-content {
    background: #fff; padding: 3rem; border-radius: 24px; width: 95%; max-width: 900px;
    max-height: 90vh; overflow-y: auto; position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.ld-lightbox-content h2 { margin-top: 0; margin-bottom: 2rem; font-size: 1.8rem; color: var(--nc-text-dark); font-weight: 800; }
.ld-close-lightbox-btn {
    position: absolute; top: 1.5rem; right: 1.5rem; border: none; background: #f1f5f9; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer; font-size: 1.5rem; color: #64748b;
    display: flex; justify-content: center; align-items: center; transition: 0.2s;
}
.ld-close-lightbox-btn:hover { background: #e2e8f0; color: var(--nc-text-dark); }

/* --- GRID PRINCIPAL DO FORMULÁRIO --- */
#ld-new-sale-form .ld-form-body-grid {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 2.5rem !important;
    align-items: stretch !important;
}

/* COLUNA ESQUERDA (UPLOAD) */
.ld-form-left-col { display: flex; flex-direction: column; height: 100%; }

/* 1. Ajeitando o Label do Upload */
.ld-file-uploader {
    flex-grow: 1; /* Ocupa altura total */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 3px dashed #cbd5e1; background-color: #f8fafc;
    border-radius: 16px; padding: 1rem; text-align: center; cursor: pointer;
    transition: all 0.3s ease; position: relative; min-height: 350px;
    overflow: hidden;
}
.ld-file-uploader:hover { border-color: var(--nc-brand); background-color: #fff7ed; color: var(--nc-brand); }

/* 2. ESCONDE O INPUT NATIVO FEIO (CORREÇÃO IMPORTANTE) */
.ld-file-input-hidden {
    position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; z-index: -1;
}

/* 3. Lógica de Visualização (Sem arquivo vs Com arquivo) */
.ld-file-uploader-default-content { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ld-file-uploader .dashicons { font-size: 4rem; height: auto; width: auto; margin-bottom: 1.5rem; color: #94a3b8; }
.ld-file-uploader-main-text { font-weight: 800; font-size: 1.2rem; text-transform: uppercase; }

/* Se tiver a classe .has-file (adicionada via JS), esconde a nuvem */
.ld-file-uploader.has-file .ld-file-uploader-default-content { display: none; }
.ld-file-uploader.has-file .ld-file-preview-area { display: flex; }

/* Área de Preview (Inicialmente oculta) */
.ld-file-preview-area {
    display: none; /* Oculto por padrão */
    flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; text-decoration: none; position: relative;
}

/* Imagem / PDF */
#ld-file-thumbnail, #ld-pdf-canvas {
    max-width: 100%; max-height: 260px; object-fit: contain;
    border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

/* Ícone para arquivos genéricos (CDR, etc) */
#ld-file-icon.dashicons-media-default {
    font-size: 80px; width: 80px; height: 80px; color: var(--nc-brand); display: block;
}

.ld-file-name-display {
    margin-top: 1rem; font-weight: 600; color: var(--nc-text-dark);
    word-break: break-all; font-size: 0.9rem; padding: 0 10px;
}

/* Botão de Remover (X) */
.ld-remove-file-btn {
    position: absolute; top: 10px; right: 10px;
    background: #ef4444; color: #fff; border: 2px solid #fff;
    border-radius: 50%; width: 32px; height: 32px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); font-size: 1.2rem; z-index: 10;
}
.ld-remove-file-btn:hover { background: #dc2626; transform: scale(1.1); }


/* COLUNA DIREITA (INPUTS) */
#ld-new-sale-form .ld-form-right-col {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 1.2rem; height: 100%;
}

.ld-form-label { font-weight: 700; font-size: 0.8rem; color: #64748b; margin-bottom: 0.4rem; display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.ld-form-input {
    width: 100%; height: 50px; padding: 0 1rem; border: 2px solid #e2e8f0;
    border-radius: 10px; font-size: 1rem; color: var(--nc-text-dark); background: #fff;
}
.ld-form-input:focus { border-color: var(--nc-brand); outline: none; }

/* Grupo Busca Cliente */
.ld-client-group { display: flex !important; gap: 1rem !important; margin-bottom: 1.5rem; align-items: center; }
.ld-search-wrapper { flex-grow: 1; position: relative; }
.btn-new-client {
    background: #e2e8f0; color: var(--nc-text-dark); padding: 0 20px; border-radius: 10px; height: 50px;
    display: flex; align-items: center; text-decoration: none; font-weight: 800; white-space: nowrap;
}
.btn-new-client:hover { background: #cbd5e1; }

/* Grupo Entrega */
.ld-delivery-group { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; }
.ld-date-input-wrapper { position: relative; display: flex; align-items: center; }
.ld-date-input-wrapper input { width: 100%; }
.ld-date-input-wrapper .dashicons { position: absolute; right: 15px; color: #94a3b8; pointer-events: none; }

/* Botão Submit no Rodapé */
#ld-form-submit-btn {
    height: 56px; font-weight: 800; font-size: 1.1rem; text-transform: uppercase;
    margin-top: auto; /* Empurra para baixo */
    background: var(--nc-brand); color: #fff; border: none; border-radius: 12px;
    cursor: pointer; width: 100%; box-shadow: 0 10px 15px -3px rgba(245, 130, 32, 0.3);
}
#ld-form-submit-btn:hover:not(:disabled) { background-color: #ea7a1a; transform: translateY(-2px); }
#ld-form-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* MODOS ESPECIAIS E RESPONSIVIDADE */
#ld-new-sale-form.mode-only-client .ld-client-group,
#ld-new-sale-form.mode-only-client .ld-form-body-grid { display: none !important; }
#ld-new-sale-form.mode-only-client #ld-new-client-form-fields { display: flex !important; flex-direction: column; gap: 1.5rem; }
#ld-new-sale-form.mode-only-client #ld-save-new-client-btn { width: 100%; height: 56px; font-weight: 800; font-size: 1.1rem; }
.mode-only-client .ld-lightbox-content h2 { text-align: center; }

@media (max-width: 900px) {
    #leonidas-portal.ld-portal-layout { grid-template-columns: 1fr; }
    .ld-list-titles { display: none; }
    .ld-sale-row { grid-template-columns: 1fr auto; gap: 0.5rem; }
    .ld-col-id { grid-area: 1 / 1; }
    .ld-col-status { grid-area: 1 / 2; }
    .ld-col-client { grid-area: 2 / 1; font-size: 0.9rem; }
    .ld-col-action { grid-area: 2 / 2; }
    #ld-new-sale-form .ld-form-body-grid { grid-template-columns: 1fr !important; }
    .ld-file-uploader { min-height: 200px; margin-bottom: 1.5rem; }
}

/* =============================================================
   09. NOTIFICAÇÕES (TOASTS) - CORREÇÃO VISUAL
   Faz as mensagens flutuarem sobre o formulário
============================================================= */
#ld-notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000000; /* Z-Index altíssimo para ficar acima do Lightbox (9999) e Loader */
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
    width: 100%;
    pointer-events: none; /* Permite clicar através da área vazia */
}

.ld-toast-notification {
    background: #fff;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    border-left: 6px solid #333;
    font-weight: 600;
    font-size: 0.95rem;
    color: #334155;
    opacity: 0;
    transform: translateX(50px); /* Começa deslocado para a direita */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efeito elástico */
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ld-toast-notification.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Estilo para Sucesso (Verde) */
.ld-toast-notification.success {
    border-left-color: #10b981;
    background-color: #ecfdf5;
    color: #064e3b;
}

/* Estilo para Erro (Vermelho) */
.ld-toast-notification.error {
    border-left-color: #ef4444;
    background-color: #fff1f2;
    color: #be123c;
}

/* =============================================================
   10. ESTILOS DO HUB CENTRAL (CORREÇÃO GERAL)
============================================================= */

/* --- ESTRUTURA DE ABAS (Conserta os botões não clicáveis) --- */
#leonidas-portal .ld-tabs {
    display: flex;
    gap: 15px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
    overflow-x: auto;
}

#leonidas-portal .ld-tab-btn {
    padding: 15px 25px;
    background: none;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    color: #64748b; /* var(--c-gray) */
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

#leonidas-portal .ld-tab-btn:hover {
    color: #f58220; /* var(--c-brand) */
    background: #fff7ed;
    border-radius: 8px 8px 0 0;
}

#leonidas-portal .ld-tab-btn.active {
    color: #0f172a; /* var(--c-text) */
    font-weight: 800;
    border-bottom: 3px solid #f58220; /* var(--c-brand) */
    margin-bottom: -2px;
}

/* Lógica de Exibição (Isso faz a aba funcionar visualmente) */
#leonidas-portal .tab-content {
    display: none;
    animation: fadeIn 0.4s;
}

#leonidas-portal .tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- CORREÇÃO DA TABELA QUEBRADA (VERTICAL) --- */
#leonidas-portal .dash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* Espaço entre linhas */
    margin-top: 1rem;
    display: table; /* Força comportamento de tabela */
}

#leonidas-portal .dash-table thead {
    display: table-header-group;
}

#leonidas-portal .dash-table tbody {
    display: table-row-group;
}

#leonidas-portal .dash-table tr {
    display: table-row;
}

#leonidas-portal .dash-table th,
#leonidas-portal .dash-table td {
    display: table-cell;
    vertical-align: middle;
}

#leonidas-portal .dash-table th {
    text-align: left;
    padding: 15px;
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    border-bottom: 2px solid #e2e8f0;
}

#leonidas-portal .dash-table td {
    background: #fff;
    padding: 18px 15px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

/* Bordas arredondadas na linha */
#leonidas-portal .dash-table tr td:first-child {
    border-left: 1px solid #f1f5f9;
    border-radius: 12px 0 0 12px;
}
#leonidas-portal .dash-table tr td:last-child {
    border-right: 1px solid #f1f5f9;
    border-radius: 0 12px 12px 0;
    text-align: right;
}

#leonidas-portal .dash-row:hover td {
    background: #fff7ed;
    border-color: #fed7aa;
}

/* --- CARDS FINANCEIROS (SUPER DASHBOARD) --- */
#leonidas-portal .fin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 2rem;
}

#leonidas-portal .fin-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}

#leonidas-portal .fin-card label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 10px;
}

#leonidas-portal .fin-card .amount {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}

#leonidas-portal .fin-paid .amount { color: #22c55e; }
#leonidas-portal .fin-debt .amount { color: #ef4444; }

/* --- LISTA DE CLIENTES (ESTILO) --- */
#leonidas-portal .client-row td {
    font-size: 1rem;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 900px) {
    #leonidas-portal .fin-grid { grid-template-columns: 1fr; }
    
    /* Tabela Responsiva no Mobile (Scroll horizontal) */
    #leonidas-portal .ld-recent-sales {
        overflow-x: auto;
    }
    #leonidas-portal .dash-table {
        min-width: 700px; /* Garante largura mínima para não quebrar layout */
    }
}

/* =============================================================
   11. HUB V2 - DESIGN DE CARDS & KPIS
============================================================= */

/* Força Largura Total */
#leonidas-portal .ld-portal-main {
    max-width: 100% !important;
    width: 100%;
}
.ld-recent-sales.no-bg {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: none;
}

/* Barra de KPIs */
.ld-kpi-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.kpi-item {
    flex: 1;
    background: #fff;
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    transition: 0.2s;
    min-width: 140px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.kpi-item:hover {
    transform: translateY(-3px);
    border-color: #f58220;
    box-shadow: 0 10px 20px rgba(245, 130, 32, 0.1);
}
.kpi-val { font-size: 1.8rem; font-weight: 800; line-height: 1; color: #0f172a; margin-bottom: 5px; }
.kpi-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.5px; }

/* Barra de Busca Nova */
.full-search-bar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.full-search-bar i { color: #94a3b8; font-size: 1.1rem; }
.ld-input-clean {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 1rem;
    color: #334155;
    outline: none;
}

/* CABEÇALHO DA "TABELA" (Fake Table) */
.table-header-row {
    display: flex;
    align-items: center;
    padding: 0 20px 10px 20px;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    gap: 15px;
}

/* LINHAS EM FORMATO DE CARD (O Design que você pediu) */
.order-card-row {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px; /* Espaço entre cards */
    gap: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}
.order-card-row:hover {
    transform: translateX(5px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
/* Borda colorida no hover baseada no status */
.order-card-row.is-late:hover { border-left: 5px solid #ef4444; }
.order-card-row.is-completed:hover { border-left: 5px solid #22c55e; }
.order-card-row.is-production:hover { border-left: 5px solid #3b82f6; }

/* Responsividade Mobile */
@media (max-width: 900px) {
    .order-card-row {
        flex-wrap: wrap;
    }
    .table-header-row { display: none; }
    .kpi-item { min-width: 45%; }
}

/* =============================================================
   12. CORREÇÃO BLINDADA: HUD (BULK BAR) E MODAL FLUTUANTE
   Força posição fixa em relação à janela, ignorando containers
============================================================= */

/* 1. Barra de Ações (HUD) */
.bulk-actions-bar {
    position: fixed !important;
    left: 50% !important;
    bottom: 30px !important;
    transform: translateX(-50%) translateY(150px); /* Começa escondido */
    background: #1e293b;
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    z-index: 999999 !important; /* Garante que fique acima de tudo */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.bulk-actions-bar.show {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* 2. Overlay do Modal (Controlezinho do PC) */
.agent-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(5px);
    z-index: 9999999 !important; /* Acima até da Bulk Bar */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Conteúdo do Modal */
.agent-modal {
    background: #fff;
    padding: 2.5rem;
    border-radius: 20px;
    width: 90%;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: popInModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popInModal {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Estilização das Opções do Agente */
.agent-option {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    color: #334155;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.agent-option:hover {
    background: #f58220; /* Cor da Marca */
    color: #fff;
    border-color: #f58220;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 130, 32, 0.2);
}

/* Botão Cancelar do Modal */
.btn-cancel-modal {
    background: none;
    border: none;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 1rem;
    cursor: pointer;
}
.btn-cancel-modal:hover { color: #ef4444; }

/* ... (Mantenha o CSS existente) ... */

/* --- NOVOS ESTILOS: SISTEMA DE VENDEDORES --- */

/* Card do Vendedor no Dashboard Admin */
.ld-seller-card {
    position: relative;
    overflow: hidden;
}
.ld-seller-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 6px;
    background: var(--nc-brand);
}

/* Dashboard Individual do Vendedor */
.ld-welcome-seller h2 {
    font-size: 2rem;
    color: var(--nc-text-dark);
    margin-bottom: 5px;
}
.ld-welcome-seller p {
    color: var(--nc-text-gray);
    font-size: 1.1rem;
}

/* Badge de Status na Lista do Vendedor */
.status-badge.venda { color: var(--color-venda); background: #fff7ed; padding: 5px 10px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.status-badge.preparacao_base { color: var(--color-corte); background: #fef2f2; padding: 5px 10px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }
.status-badge.concluido { color: var(--color-conferencia); background: #ecfdf5; padding: 5px 10px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; }

/* Botões de Ação do Vendedor */
.btn-seller-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: all 0.2s ease;
}
.btn-seller-contact:hover {
    transform: scale(1.1);
}

/* =============================================================
   MOBILE FIX: BUSCA NO TOPO & AJUSTE DE GRID
   Este bloco resolve o problema de layout quebrado e 
   coloca a busca acima das vendas no mobile.
============================================================= */
@media (max-width: 900px) {
    /* 1. Transforma o Grid em Coluna Flexível */
    #leonidas-portal .ld-main-grid {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }

    /* 2. Joga o Painel (Data/Busca) para o TOPO (Ordem -1) */
    #leonidas-portal .ld-mini-panel {
        order: -1;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3. Vendas Recentes vão para baixo e ocupam largura total */
    #leonidas-portal .ld-recent-sales {
        order: 2;
        width: 100%;
        display: block; /* Garante que ocupe espaço */
    }
    
    /* 4. Corrige o título cortado "Vendas Recente..." */
    .ld-recent-sales h2 {
        white-space: normal; /* Permite quebrar linha */
        font-size: 1.5rem;   /* Ajusta tamanho para mobile */
        margin-bottom: 1rem;
    }
}