@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&family=Inter:wght@400;500;700&display=swap');

/* BLINDAGEM CONTRA ESTILOS DO TEMA GLOBAL (RESETS) */
.pcp-full-layout, .pcp-full-layout * { box-sizing: border-box; }

/* Exclui .dashicons do reset de fontes para não quebrar os ícones */
.pcp-full-layout p, 
.pcp-full-layout span:not(.dashicons), 
.pcp-full-layout label, 
.pcp-full-layout th, 
.pcp-full-layout td, 
.pcp-full-layout li, 
.pcp-full-layout h1, 
.pcp-full-layout h2, 
.pcp-full-layout h3, 
.pcp-full-layout h4 {
    font-family: 'Inter', sans-serif !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    margin-bottom: 0;
}

/* Protege os ícones para garantirem a fonte original do WP */
.pcp-full-layout .dashicons {
    font-family: 'dashicons' !important;
}

.pcp-full-layout ul, 
.pcp-full-layout ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pcp-full-layout select, 
.pcp-full-layout input {
    font-family: 'Roboto Mono', monospace !important;
    box-shadow: none !important;
    margin: 0;
}

.pcp-full-layout {
    font-family: 'Inter', sans-serif;
    background-color: var(--pcp-darker);
    color: var(--pcp-text);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    margin: 0;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

/* FOCO E BLINDAGEM ADICIONAL */
.pcp-full-layout button:focus, .pcp-full-layout select:focus, .pcp-full-layout input:focus, .action-btn:focus, .pcp-btn-auth:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--pcp-darker), 0 0 0 4px var(--pcp-accent) !important;
    border-color: var(--pcp-accent) !important;
}

/* HEADER */
.pcp-top-bar {
    height: 60px; background-color: var(--pcp-dark); border-bottom: 1px solid var(--pcp-border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0;
}
.pcp-branding h2 { margin: 0; font-size: 18px; color: var(--pcp-accent) !important; font-family: 'Roboto Mono', monospace !important; font-weight: 700 !important; }
.pcp-subtitle { font-size: 12px; color: #888899; margin-left: 10px; display: none; }
@media (min-width: 768px) { .pcp-subtitle { display: inline; } }
.pcp-header-actions { display: flex; align-items: center; gap: 15px; }
.pcp-icon-btn { background: transparent; border: 1px solid var(--pcp-border); color: var(--pcp-accent); padding: 6px; border-radius: 4px; cursor: pointer; display: none; }
@media (max-width: 1024px) { .pcp-icon-btn { display: block; } }

/* GRID LAYOUT (Atualizado para 4 Colunas no Desktop) */
.pcp-grid-container { 
    display: grid; 
    grid-template-columns: 320px 1fr 360px 280px; 
    flex: 1; 
    min-height: 0; 
    height: 100%; 
    overflow: hidden; 
}

/* SIDEBAR ESQUERDA (ACORDEONS) */
.pcp-sidebar-left { background-color: var(--pcp-dark); border-right: 1px solid var(--pcp-border); overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.accordion-item { margin-bottom: 12px; border: 1px solid var(--pcp-border); border-radius: 8px; background: transparent; transition: all 0.3s ease; flex-shrink: 0; }
.accordion-header { background: var(--pcp-panel) !important; width: 100%; padding: 15px; border: none !important; text-align: left; color: var(--pcp-accent) !important; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: 'Roboto Mono', monospace !important; font-size: 13px; border-radius: 7px; transition: 0.2s; outline: none; }
.accordion-header:hover { filter: brightness(1.2); color: var(--pcp-accent-hover) !important; }
.accordion-item.active .accordion-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--pcp-border) !important; }
.accordion-content { background: rgba(0,0,0,0.15); max-height: 0; overflow: hidden; padding: 0 15px; opacity: 0; transition: max-height 0.35s ease-out, padding 0.3s ease, opacity 0.3s ease; }
.accordion-item.active .accordion-content { padding-top: 20px; padding-bottom: 20px; opacity: 1; }

.control-group-content label { display: block; margin-top: 15px; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--pcp-text); opacity: 0.9; }
.control-group-content label:first-child { margin-top: 0; }
input[type="text"], input[type="number"], select { width: 100%; background: rgba(0,0,0,0.2) !important; border: 1px solid var(--pcp-border) !important; color: #fff !important; padding: 10px; border-radius: 6px; transition: border-color 0.3s; color-scheme: dark !important; }
input[type="text"]:hover, input[type="number"]:hover, select:hover { border-color: var(--pcp-accent) !important; background: rgba(255,255,255,0.05) !important; }
input[type="color"] { width: 100%; border: 1px solid var(--pcp-border); background: rgba(0,0,0,0.2); cursor: pointer; border-radius: 6px; }

/* ESTILIZAÇÃO DE OPTIONS */
select option { 
    background-color: var(--pcp-darker) !important; 
    color: var(--pcp-text) !important; 
    padding: 12px 10px !important;
    border: none !important;
    outline: none !important;
}
select option:checked, select option:hover, select option:focus, select option:active {
    background-color: var(--pcp-accent) !important; 
    color: #1e1e2e !important; 
    box-shadow: 0 0 10px 100px var(--pcp-accent) inset !important;
    cursor: pointer !important;
}

.switches-row { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.switch-wrapper { display: flex; align-items: center; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; margin-bottom: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--pcp-accent); }
input:checked + .slider:before { transform: translateX(20px); }

/* MAIN CONTENT (VISUALIZADOR) */
.pcp-main-content { background-color: var(--pcp-darker); display: flex; flex-direction: column; padding: 0; overflow: hidden; position: relative; height: 100%; border-right: 1px solid var(--pcp-border); }
.pcp-preview-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 70%); padding: 20px; overflow: hidden; min-height: 0; }
#pcpPreviewContainer { position: relative; width: 100%; height: 100%; border: 1px dashed var(--pcp-border); display: flex; justify-content: center; align-items: center; border-radius: 12px; overflow: hidden; }

/* Engine Visual PCP */
.pcp-paper-visual { position: absolute; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden; }
.pcp-dimension-line { position: absolute; background-color: currentColor; z-index: 30; }
.pcp-dimension-line.horizontal { height: 1px; }
.pcp-dimension-line.vertical { width: 1px; }
.pcp-dimension-line::before, .pcp-dimension-line::after { content: ''; position: absolute; background-color: currentColor; }
.pcp-dimension-line.horizontal::before, .pcp-dimension-line.horizontal::after { width: 1px; height: 5px; top: -2px; }
.pcp-dimension-line.horizontal::before { left: 0; } .pcp-dimension-line.horizontal::after { right: 0; }
.pcp-dimension-line.vertical::before, .pcp-dimension-line.vertical::after { height: 1px; width: 5px; left: -2px; }
.pcp-dimension-line.vertical::before { top: 0; } .pcp-dimension-line.vertical::after { bottom: 0; }
.pcp-dimension-text { position: absolute; font-size: 10px; padding: 1px 4px; border-radius: 3px; background-color: var(--pcp-panel); color: currentColor; white-space: nowrap; z-index: 40; }

#pcpSwapButton { padding: 8px; border-radius: 50%; background-color: var(--pcp-panel); border: 1px solid var(--pcp-border); cursor: pointer; transition: all 0.3s ease; align-self: center; margin: 10px 0; width: 40px; height: 40px; display:flex; justify-content:center; align-items:center; }
#pcpSwapButton:hover { background-color: var(--pcp-accent); transform: rotate(180deg); }
#pcpSwapButton svg { stroke: var(--pcp-text); }
#pcpSwapButton:hover svg { stroke: var(--pcp-dark); }

/* FOOTER ACTIONS */
.pcp-footer-actions { width: 100%; background: var(--pcp-dark); border-top: 1px solid var(--pcp-border); padding: 20px; flex-shrink: 0; max-height: 45%; overflow-y: auto; }
.pcp-footer-grid { display: grid; gap: 20px; width: 100%; max-width: 1400px; margin: 0 auto; align-items: start; }
.pcp-box-panel { background: var(--pcp-panel); padding: 20px; border-radius: 8px; border: 1px solid var(--pcp-border); }
.pcp-section-title { margin-top: 0; font-size: 14px; color: var(--pcp-accent) !important; margin-bottom: 15px; }

/* COLUNA LATERAL DE TABELAS */
.pcp-sidebar-tables { 
    background-color: var(--pcp-dark); 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; /* Scroll vertical EXCLUSIVO na coluna */
    overflow-x: hidden;
    max-height: 100%; 
    padding: 20px; 
    gap: 20px; 
    border-right: 1px solid var(--pcp-border); 
}

/* Força as caixas (panels) internas a abrirem por completo */
.pcp-sidebar-tables .pcp-box-panel {
    overflow: visible !important;
    max-height: none !important;
    min-height: auto !important;
    height: auto !important;
}

/* O conteúdo da tabela em si pode rolar no celular pra direita se necessário */
.pcp-sidebar-tables .pcp-box-panel > div {
    overflow-x: auto;
}

.pcp-detailed-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pcp-detailed-table th, .pcp-detailed-table td { padding: 8px; border-bottom: 1px solid var(--pcp-border); text-align: left; vertical-align: middle; }

.action-btn { width: 100%; padding: 16px; font-family: 'Roboto Mono', monospace !important; font-weight: 700; text-transform: uppercase; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.2s, box-shadow 0.2s; }
.btn-outline { background: transparent !important; border: 2px solid var(--pcp-accent) !important; color: var(--pcp-text) !important; transition: all 0.2s ease !important; }
.btn-outline:hover:not(:disabled) { border-color: var(--pcp-accent) !important; color: var(--pcp-dark) !important; background: var(--pcp-accent) !important; box-shadow: 0 0 15px rgba(255,183,0,0.2) !important; }

#pcp-save-decision { background: rgba(255,183,0,0.1); padding: 15px; border-radius: 8px; border: 1px solid var(--pcp-accent); width: 100%; margin-top: 10px; display: none; }
.pcp-decision-buttons { display: flex; gap: 10px; margin-top: 10px; }
.pcp-btn-decision-update { background: var(--pcp-accent) !important; color: #000 !important; border: none; flex:1; padding:8px; border-radius:4px; font-weight:bold; cursor:pointer; }
.pcp-btn-decision-new { background: transparent !important; border: 1px solid var(--pcp-accent) !important; color: var(--pcp-accent) !important; flex:1; padding:8px; border-radius:4px; font-weight:bold; cursor:pointer; }

/* SIDEBAR DIREITA (LISTA SAVED E FILTROS) */
.pcp-sidebar-right { background-color: var(--pcp-dark); border-left: 1px solid var(--pcp-border); display: flex; flex-direction: column; overflow-y: auto; max-height: 100%; }
.pcp-saved-header { padding: 20px; border-bottom: 1px solid var(--pcp-border); display: flex; justify-content: space-between; align-items: center; }
.pcp-saved-header h3 { margin: 0; font-size: 14px; color: var(--pcp-accent) !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }

.pcp-saved-controls { padding: 15px 20px; border-bottom: 1px solid var(--pcp-border); display: flex; gap: 8px; }
#pcp-search { flex: 2; padding: 8px; font-size: 12px; background: rgba(0,0,0,0.2) !important; color: #fff !important; border: 1px solid var(--pcp-border) !important; border-radius: 4px; }
#pcp-search:focus { border-color: var(--pcp-accent) !important; outline: none; }
.pcp-sort-select { flex: 1; padding: 8px; font-size: 12px; min-width: 0; background: rgba(0,0,0,0.2) !important; color: #fff !important; border: 1px solid var(--pcp-border) !important; border-radius: 4px; }

.pcp-saved-section { flex-grow: 1; overflow-y: auto; padding: 0; }
.pcp-saved-item { padding: 15px 20px; border-bottom: 1px solid var(--pcp-border); display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; cursor: pointer; }
.pcp-saved-item:hover { background: rgba(255,255,255,0.03); border-left: 3px solid var(--pcp-accent); padding-left: 17px; }
.pcp-code-val { display: block; font-weight: bold; color: #fff; font-size: 14px; }
.pcp-btn-load { background: var(--pcp-success) !important; color: #000 !important; border: none !important; padding: 8px; border-radius: 4px; cursor: pointer; }
.pcp-btn-del { background: transparent !important; color: var(--pcp-error) !important; border: none !important; cursor: pointer; font-size: 18px; padding: 5px; opacity: 0.8; } 

/* AUTH LOCKED AREA */
.pcp-locked-sidebar { padding: 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.pcp-locked-content { opacity: 0.8; }
.pcp-lock-icon { font-size: 40px; margin-bottom: 15px; display: block; width: auto; height: auto; color: var(--pcp-text); opacity: 0.5; }
.pcp-lock-msg { color: var(--pcp-text); margin-bottom: 25px; font-size: 13px; line-height: 1.5; }
.pcp-auth-buttons { display: flex; flex-direction: column; gap: 10px; }

.pcp-btn-auth { display: block; width: 100%; padding: 10px; border-radius: 6px; text-align: center; text-decoration: none !important; font-weight: 700; margin-bottom:0px; text-transform: uppercase; }
.pcp-btn-login { background: transparent !important; border: 1px solid var(--pcp-accent) !important; color: var(--pcp-accent) !important; }
.pcp-btn-login:hover { background: rgba(255,183,0,0.1) !important; color: var(--pcp-accent-hover) !important; border-color: var(--pcp-accent-hover) !important; transform: translateY(-2px); }
.pcp-btn-login:active { transform: translateY(0); }

.pcp-btn-register { background: var(--pcp-accent) !important; color: #1e1e2e !important; border: 1px solid var(--pcp-accent) !important; }
.pcp-btn-register:hover { background: var(--pcp-accent-hover) !important; border-color: var(--pcp-accent-hover) !important; color: #000 !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255,183,0,0.3); }
.pcp-btn-register:active { transform: translateY(0); box-shadow: none; }

.pcp-close-locked { position: absolute; top: 15px; right: 15px; font-size: 24px; z-index: 101; padding: 10px; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* REGRAS DE RESPONSIVIDADE (Tablet/Desktop Pequeno) */

@media (max-width: 1440px) {
    .pcp-grid-container { 
        grid-template-columns: 320px 1fr 300px; 
        grid-template-rows: 1fr auto; 
    }
    .pcp-sidebar-left { grid-row: 1 / 3; grid-column: 1 / 2; }
    .pcp-main-content { grid-row: 1 / 2; grid-column: 2 / 3; border-right: none; border-bottom: 1px solid var(--pcp-border); }
    
    .pcp-sidebar-tables { 
        grid-row: 2 / 3; 
        grid-column: 2 / 3; 
        flex-direction: row; 
        flex-wrap: wrap; 
        border-right: none; 
        border-top: none; 
        height: auto; 
        overflow-y: visible;
        align-items: flex-start;
    }
    .pcp-sidebar-tables > div { flex: 1; min-width: 320px; }
    .pcp-sidebar-right { grid-row: 1 / 3; grid-column: 3 / 4; border-left: 1px solid var(--pcp-border); }
}

/* Tablet e Mobile */
@media (max-width: 1024px) {
    .pcp-grid-container { grid-template-columns: 300px 1fr; position: relative; }
    .pcp-sidebar-tables { grid-column: 1 / -1; grid-row: 3 / 4; flex-direction: column; }
    .pcp-main-content { grid-column: 2 / 3; grid-row: 1 / 3; }
    
    .pcp-sidebar-right { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; z-index: 100; background: var(--pcp-darker); transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -10px 0 30px rgba(0,0,0,0.8); border-left: 1px solid var(--pcp-border); }
    .pcp-sidebar-right.open { transform: translateX(0); }
    #pcp-close-saved-mobile { display: block !important; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }
}

@media (max-width: 768px) {
    .pcp-full-layout { position: relative !important; width: 100% !important; height: auto !important; min-height: 800px; margin: 0 auto !important; overflow: visible !important; }
    .pcp-grid-container { display: flex; flex-direction: column; height: auto; overflow: visible; }
    .pcp-main-content { order: 1; height: auto; min-height: 400px; flex: none; border-bottom: 1px solid var(--pcp-border); overflow: visible; display: flex; flex-direction: column; }
    .pcp-preview-wrapper { height: 350px; flex: none; }
    .pcp-footer-actions { height: auto; max-height: none; overflow: visible; }
    .pcp-footer-grid { grid-template-columns: 1fr !important; }
    .pcp-sidebar-left { order: 2; width: 100%; height: auto; flex: none; border-right: none; overflow: visible; }
    .pcp-sidebar-tables { order: 3; flex-direction: column; padding: 15px; }
}