/* --- CONFIGURAÇÕES GERAIS --- */
:root { --bg: #0f0f0f; --surface: #1a1a1a; --surface-light: #252525; --primary: #00e68e; --text-main: #ffffff; --text-sec: #999; --border: #333; --input-bg: #121212; --gamer-purple: #8a2be2; --gamer-dark: #1a0b2e; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--bg); color: var(--text-main); margin: 0; padding: 15px; display: flex; justify-content: center; min-height: 100vh; box-sizing: border-box; overscroll-behavior: none; }

/* Calculadora UI (Escondida na impressão) */
.app-container { background-color: var(--surface); width: 100%; max-width: 500px; border-radius: 16px; padding: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 20px; }
header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
h2 { margin: 0; font-size: 1.2rem; color: var(--primary); }
.rate-badge { background: var(--surface-light); padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.rate-input { width: 80px; background: transparent; border: none; color: white; font-weight: bold; text-align: right; font-size: 1.1rem; }
.icon-btn { background: none; border: none; font-size: 1.1rem; padding: 0; cursor: pointer; color: #888; }
.input-stack { display: flex; flex-direction: column; gap: 12px; }
.big-input-group { position: relative; }
.big-input-group label { position: absolute; top: 8px; left: 12px; font-size: 0.75rem; color: var(--text-sec); font-weight: 700; }
.big-input { width: 100%; background: var(--input-bg); border: 1px solid var(--border); padding: 24px 12px 8px 12px; border-radius: 10px; color: white; font-size: 1.2rem; box-sizing: border-box; transition: border 0.2s; }
.big-input:focus { outline: none; border-color: var(--primary); background: #161616; }
#inp-robux { border-left: 4px solid #00a2ff; } #inp-usd { border-left: 4px solid #28a745; } #inp-brl { border-left: 4px solid #00e68e; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.small-input-group label { display: block; font-size: 0.75rem; color: var(--text-sec); margin-bottom: 4px; }
.small-input { width: 100%; padding: 10px; background: var(--surface-light); border: 1px solid var(--border); border-radius: 8px; color: white; box-sizing: border-box; }
.financial-summary { background: #222; border-radius: 12px; padding: 15px; border: 1px solid var(--border); }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; color: #bbb; }
.summary-row.highlight { color: white; font-weight: bold; border-top: 1px solid #333; padding-top: 8px; margin-top: 8px; font-size: 1rem; }
.val-gross { color: #f0ad4e; } .val-net { color: var(--primary); } .val-tax { color: #ff4d4d; }
.btn-invoice { width: 100%; background: #333; color: white; border: 1px solid #555; padding: 12px; border-radius: 10px; font-weight: bold; cursor: pointer; margin-top: 10px; }
.btn-invoice:hover { background: #444; border-color: var(--primary); }
.partners-section { background: var(--surface-light); border-radius: 12px; padding: 15px; }
.partners-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.btn-add { background: #00b06f; color: white; border: none; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; cursor: pointer; }
.partner-list { display: flex; flex-direction: column; gap: 8px; }
.partner-row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 8px; }
.p-name { flex: 2; background: transparent; border: none; color: white; border-bottom: 1px solid #444; padding: 4px; }
.p-pct { width: 50px; background: #111; border: 1px solid #444; color: var(--primary); text-align: center; border-radius: 4px; padding: 5px; }
.p-result { flex: 2; text-align: right; font-size: 0.85rem; line-height: 1.2; }
.btn-del { color: #666; background: none; border: none; font-size: 1.2rem; padding: 0 5px; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #000; padding: 8px 20px; border-radius: 20px; font-weight: bold; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 2000; }

/* --- INVOICE MODAL --- */
#invoice-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 999; justify-content: center; align-items: flex-start; padding: 20px; box-sizing: border-box; overflow-y: auto; }

/* Controles */
.invoice-controls-panel { position: fixed; left: 20px; top: 20px; width: 200px; background: #1a1a1a; padding: 15px; border-radius: 10px; border: 1px solid #333; z-index: 1001; }
.invoice-controls-panel h3 { margin: 0 0 10px 0; font-size: 1rem; color: var(--primary); }
.control-group { margin-bottom: 15px; }
.btn-mini { padding: 5px 10px; border: 1px solid #444; background: #222; color: #fff; cursor: pointer; font-size: 0.8rem; border-radius: 4px; }
.btn-mini.active { background: var(--gamer-purple); border-color: var(--gamer-purple); }
.btn-action { width: 100%; padding: 10px; margin-top: 10px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; }
.btn-print { background: var(--primary); color: #000; }
.btn-close { background: #444; color: #fff; }

/* Papel da Invoice (Visualização) */
.invoice-paper { 
    background: white; color: #111; 
    width: 210mm; /* A4 */
    min-height: 297mm; 
    padding: 1.5cm; margin: 0 auto 50px auto; 
    position: relative; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 12px solid var(--gamer-dark); outline: 4px solid var(--gamer-purple); outline-offset: -12px; 
    box-shadow: 0 0 50px rgba(0,0,0,0.5); box-sizing: border-box;
}

/* Elementos Internos */
.inv-top-bar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; position: relative; z-index: 1; }
.inv-logo-center { position: absolute; left: 50%; transform: translateX(-50%); top: 0; text-align: center; width: 250px; }
.logo-area { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px dashed #ccc; border-radius: 4px; }
.logo-area:hover { background: #f0f0f0; }
#logo-img { max-width: 100%; max-height: 100%; display: none; }
.logo-text { font-size: 0.7rem; color: #888; text-align: center; }
.logo-text-mode { font-size: 2rem; font-weight: 900; text-align: center; text-transform: uppercase; border: none; width: 100%; color: var(--gamer-purple); }
.inv-title-large { font-size: 3rem; font-weight: 800; letter-spacing: 2px; color: var(--gamer-dark); margin: 0; line-height: 1; }
.inv-meta-block { text-align: right; }
.inv-meta-label { font-size: 0.7rem; color: #666; font-weight: bold; text-transform: uppercase; }
.inv-meta-val { font-size: 1rem; font-weight: bold; color: #000; margin-bottom: 8px; display: block; width: 100%; text-align: right; border:none; }
.btn-mini-icon { border:none; background:none; cursor:pointer; font-size:1rem; padding: 0 5px; }

.inv-grid { display: flex; justify-content: space-between; margin-bottom: 30px; margin-top: 50px; position: relative; z-index: 1; }
.inv-col { width: 45%; }
.inv-label { font-size: 0.8rem; color: var(--gamer-purple); font-weight: 800; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }

.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; position: relative; z-index: 1; }
.inv-table th { background-color: #e6d6ff; color: #000; text-align: left; padding: 10px; font-size: 0.85rem; text-transform: uppercase; font-weight: 800; border: 2px solid var(--gamer-dark); }
.inv-table td { padding: 10px; border-left: 2px solid var(--gamer-dark); border-right: 2px solid var(--gamer-dark); border-bottom: 1px solid #ddd; vertical-align: top; font-size: 0.95rem; }
.inv-table tr:last-child td { border-bottom: 2px solid var(--gamer-dark); }

.inv-footer { display: flex; justify-content: space-between; margin-top: 20px; page-break-inside: avoid; position: relative; z-index: 1; }
.inv-payment-info { width: 55%; font-size: 0.9rem; }
.inv-total-area { width: 40%; }
.total-row { display: flex; justify-content: space-between; background: #e6d6ff; border: 2px solid var(--gamer-dark); padding: 10px; font-weight: bold; align-items: center; }

.editable { border: 1px dashed transparent; width: 100%; background: transparent; resize: none; font-family: inherit; color: inherit; padding: 2px; overflow: hidden; min-height: 1.2em; }
.editable:hover { background: #f9f9f9; border-color: #ccc; }
.bold-input { font-weight: bold; font-size: 1.1rem; }
.profile-bar { display: flex; gap: 5px; margin-bottom: 5px; align-items: center; }
.profile-select { flex: 1; font-size: 0.75rem; padding: 4px; border: 1px solid #ccc; background: #eee; width: 100%; }
.btn-save-profile { background: #ddd; border: 1px solid #ccc; cursor: pointer; padding: 2px 8px; font-size: 1rem; border-radius: 4px; }
.btn-add-row { background: #eee; border: 1px dashed #999; width: 100%; padding: 5px; cursor: pointer; color: #555; font-size: 0.8rem; }
.btn-rem-row { color: red; cursor: pointer; font-weight: bold; border: none; background: none; }
.watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; opacity: 0.08; pointer-events: none; z-index: 0; display: flex; justify-content: center; align-items: center; }
.watermark img { width: 100%; height: auto; filter: grayscale(100%); }

/* --- MOBILE TWEAKS --- */
@media screen and (max-width: 800px) {
    .settings-grid { grid-template-columns: 1fr; }
    .invoice-controls-panel { position: relative; top: 0; left: 0; width: 100%; margin-bottom: 20px; }
    .invoice-paper { width: 100%; max-width: 100%; min-height: auto; padding: 20px; border-width: 4px; outline: none; }
    .inv-top-bar { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .inv-logo-center { position: relative; left: auto; transform: none; width: 100%; }
    .inv-meta-block { text-align: center; width: 100%; }
    .inv-meta-val { text-align: center; }
    .inv-grid { flex-direction: column; gap: 20px; margin-top: 20px; }
    .inv-col { width: 100%; }
    .inv-footer { flex-direction: column; gap: 20px; }
    .inv-payment-info, .inv-total-area { width: 100%; }
}

/* --- IMPRESSÃO (CORREÇÃO DE PÁGINA E LIMPEZA) --- */
@media print {
    @page { 
        size: A4 portrait; 
        margin: 0; 
    }
    
    html, body {
        width: 210mm;
        /* IMPORTANTE: Reduzimos 1mm para evitar glitch de página extra */
        height: 296mm; 
        margin: 0 !important; padding: 0 !important;
        background: white;
        overflow: hidden; /* Corta qualquer coisa que passar */
    }
    
    /* ESCONDE TUDO O QUE NÃO É PAPEL */
    .app-container, .invoice-controls-panel, 
    .profile-bar, .btn-save-profile, 
    .btn-add-row, .btn-rem-row, 
    .btn-mini-icon, .logo-text, .no-print,
    .partners-section, header { 
        display: none !important; 
    }
    
    #invoice-modal { 
        position: absolute !important; top: 0 !important; left: 0 !important;
        width: 210mm !important; height: 296mm !important;
        margin: 0 !important; padding: 0 !important;
        background: white !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .invoice-paper { 
        width: 210mm !important;
        min-height: 296mm !important;
        padding: 1cm !important; 
        margin: 0 !important;
        border: 12px solid var(--gamer-dark) !important;
        outline: 4px solid var(--gamer-purple) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        display: block !important;
        
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }
    
    /* Força Layout Desktop na Impressão (Mesmo vindo do mobile) */
    .inv-top-bar { flex-direction: row !important; align-items: flex-start !important; text-align: left !important; }
    .inv-logo-center { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; top: 0 !important; width: 250px !important; }
    .inv-meta-block { text-align: right !important; width: auto !important; }
    .inv-meta-val { text-align: right !important; }
    .inv-grid { flex-direction: row !important; gap: 40px !important; }
    .inv-col { width: 45% !important; }
    .inv-footer { flex-direction: row !important; }
    .inv-payment-info { width: 55% !important; }
    .inv-total-area { width: 40% !important; }

    .editable { border: none !important; resize: none !important; background: transparent !important; padding: 0 !important; }
    .logo-area { border: none !important; }
}