/* =========================================================================
   Maerev Tools: Invoice Generator, QR Generator, Kalkulator HPP
   (resources/views/tools/*). Port dari prototype "ERP TOOLS", visual
   dipertahankan.

   Semua selector dibatasi di bawah .maerev-tools dan class-nya berawalan
   maerev-tool- / maerev-invoice- / maerev-qr- / maerev-hpp-. Class asli
   prototype (.btn, .nav, .badge, .section, .hero, ...) dan reset globalnya
   (*, body, a, input, table) bentrok dengan Bootstrap + style.css, jadi tidak
   ada yang dipakai apa adanya.
   ========================================================================= */

.maerev-tools {
    --tool-text: #111827;
    --tool-muted: #6b7280;
    --tool-label: #4b5563;
    --tool-line: #e5e7eb;
    --tool-line-soft: #f1f2f4;
    --tool-card: #fff;
    --tool-soft: #f9fafb;
    --tool-input-bg: #fff;
    --tool-input-border: #d1d5db;
    --tool-accent: #4433E0;
    --tool-accent-hover: #3626c4;
    --tool-accent-ring: rgba(68, 51, 224, .14);
    --tool-success: #0f766e;
    --tool-success-bg: #ecfdf5;
    --tool-invalid: #b91c1c;
    --tool-error-text: #991b1b;
    --tool-error-bg: #fef2f2;
    --tool-error-border: #fecaca;
    --tool-explainer-text: #4f48b0;
    --tool-explainer-bg: #f3f1ff;
    --tool-shadow: 0 8px 28px rgba(17, 24, 39, .04);
    font-size: 16px;
    color: var(--tool-text);
}

html[data-bs-theme=dark] .maerev-tools {
    --tool-text: #f3f4f6;
    --tool-muted: rgba(255, 255, 255, .6);
    --tool-label: rgba(255, 255, 255, .75);
    --tool-line: #303030;
    --tool-line-soft: #262626;
    --tool-card: #1B1B1B;
    --tool-soft: #222;
    --tool-input-bg: #111;
    --tool-input-border: #3a3a3a;
    --tool-accent: #6b5cff;
    --tool-accent-hover: #5a4af0;
    --tool-accent-ring: rgba(107, 92, 255, .25);
    --tool-success: #34d399;
    --tool-success-bg: rgba(16, 185, 129, .15);
    --tool-invalid: #f87171;
    --tool-error-text: #fca5a5;
    --tool-error-bg: rgba(185, 28, 28, .15);
    --tool-error-border: rgba(248, 113, 113, .35);
    --tool-explainer-text: #c7c2ff;
    --tool-explainer-bg: rgba(107, 92, 255, .14);
    --tool-shadow: none;
    color-scheme: dark;
}

/* Reset ringan, hanya di dalam tools. :where() menjaga spesifisitasnya
   rendah supaya rule per-komponen di bawah tetap menang. */
.maerev-tools :where(h1, h2, h3, p, table, th, td, label) {
    margin: 0;
}

/* ---- Header ---- */

/* Rata tengah, sama dengan breadcrumb dan judul halaman dalam lain (blog,
   cek skor website). */
.maerev-tool-hero {
    max-width: 820px;
    margin: 24px auto 26px;
    text-align: center;
}

.maerev-tool-eyebrow {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--tool-accent);
}

.maerev-tools .maerev-tool-hero h1 {
    margin-bottom: 14px;
    font-family: "Josefin Sans", sans-serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--tool-text);
}

.maerev-tool-hero p {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: var(--tool-muted);
}

.maerev-tool-note {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--tool-label);
    background: var(--tool-card);
    border: 1px solid var(--tool-line);
    border-radius: 999px;
}

/* ---- Tab antar tools ---- */

.maerev-tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 30px;
    padding: 6px;
    background: var(--tool-card);
    border: 1px solid var(--tool-line);
    border-radius: 14px;
}

.maerev-tool-tabs a {
    padding: 9px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tool-muted);
    text-decoration: none;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease;
}

.maerev-tool-tabs a:hover {
    color: var(--tool-text);
    background: var(--tool-soft);
}

.maerev-tool-tabs a.is-active {
    color: #fff;
    background: var(--tool-accent);
}

/* ---- Panel & kartu hasil ---- */

.maerev-tool-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 22px;
    align-items: start;
}

.maerev-tool-panel,
.maerev-tool-result {
    min-width: 0;
    background: var(--tool-card);
    border: 1px solid var(--tool-line);
    border-radius: 16px;
    box-shadow: var(--tool-shadow);
}

.maerev-tool-panel {
    overflow: hidden;
}

.maerev-tool-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--tool-line);
}

.maerev-tool-panel-body,
.maerev-tool-result {
    padding: 20px;
}

.maerev-tools .maerev-tool-panel-head h2,
.maerev-tools .maerev-tool-result h2 {
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tool-text);
}

.maerev-tool-live {
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tool-success);
    background: var(--tool-success-bg);
    border-radius: 999px;
}

.maerev-tool-kpi {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

.maerev-tool-muted {
    color: var(--tool-muted);
}

.maerev-tool-small {
    font-size: 13px;
    line-height: 1.5;
}

.maerev-tool-caption {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ---- Form ---- */

.maerev-tool-group {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--tool-line-soft);
}

.maerev-tool-group-title {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.maerev-tool-field {
    margin-bottom: 12px;
}

.maerev-tools label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tool-label);
}

.maerev-tools input,
.maerev-tools textarea,
.maerev-tools select {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    /* Minimal 16px: di bawah itu Safari iOS auto-zoom saat field difokus. */
    font-size: 16px;
    line-height: 1.4;
    color: var(--tool-text);
    background: var(--tool-input-bg);
    border: 1px solid var(--tool-input-border);
    border-radius: 9px;
    outline: none;
    box-shadow: none;
}

.maerev-tools input:focus,
.maerev-tools textarea:focus,
.maerev-tools select:focus {
    border-color: var(--tool-accent);
    box-shadow: 0 0 0 3px var(--tool-accent-ring);
}

.maerev-tools [aria-invalid="true"] {
    border-color: var(--tool-invalid);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .08);
}

.maerev-tools textarea {
    min-height: 78px;
    resize: vertical;
}

.maerev-tool-error {
    margin-bottom: 16px;
    padding: 11px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tool-error-text);
    background: var(--tool-error-bg);
    border: 1px solid var(--tool-error-border);
    border-radius: 9px;
}

.maerev-tool-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tool-muted);
}

.maerev-tool-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ---- Tombol ---- */

.maerev-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.maerev-tool-btn:focus-visible,
.maerev-tool-add:focus-visible,
.maerev-tool-item-remove:focus-visible {
    outline: 3px solid var(--tool-accent-ring);
    outline-offset: 2px;
}

.maerev-tool-btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.maerev-tool-btn-primary {
    color: #fff;
    background: var(--tool-accent);
}

.maerev-tool-btn-primary:hover:not(:disabled) {
    background: var(--tool-accent-hover);
}

.maerev-tool-btn-secondary {
    color: var(--tool-text);
    background: var(--tool-card);
    border-color: var(--tool-line);
}

.maerev-tool-btn-secondary:hover {
    background: var(--tool-soft);
}

.maerev-tool-btn-wide {
    width: 100%;
}

/* ---- Invoice: editor ---- */

.maerev-tool-workspace {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.maerev-tool-items {
    display: grid;
    gap: 10px;
}

.maerev-tool-item {
    padding: 10px;
    background: var(--tool-soft);
    border: 1px solid var(--tool-line);
    border-radius: 10px;
}

/* Deskripsi satu baris penuh, qty + harga + tombol hapus di bawahnya. Di
   kolom editor 430px, empat kolom sebaris (desain prototype) memotong
   deskripsi dan nominal harga. */
.maerev-tool-item-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr 36px;
    gap: 8px;
    align-items: end;
}

.maerev-tool-item-row > div:first-child {
    grid-column: 1 / -1;
}

.maerev-tools .maerev-tool-item-row label {
    font-size: 11px;
}

.maerev-tool-item-remove {
    width: 36px;
    height: 44px;
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.maerev-tool-item-remove:hover {
    color: var(--tool-invalid);
}

.maerev-tool-add {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tool-label);
    background: var(--tool-card);
    border: 1px dashed #c7cad1;
    border-radius: 9px;
    cursor: pointer;
}

.maerev-tool-add:hover {
    color: var(--tool-accent);
    border-color: var(--tool-accent);
}

.maerev-tool-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.maerev-tool-explainer {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--tool-explainer-text);
    background: var(--tool-explainer-bg);
    border-radius: 9px;
}

/* ---- Invoice: kertas preview ----
   Sengaja TIDAK memakai variabel tema: invoice selalu kertas putih, termasuk
   saat situs di mode gelap (dan itu juga yang tercetak). */

.maerev-tool-preview {
    position: sticky;
    top: 110px;
    min-width: 0;
}

.maerev-tool-preview-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--tool-muted);
}

.maerev-invoice {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 16px 46px rgba(17, 24, 39, .07);
}

html[data-bs-theme=dark] .maerev-invoice {
    border-color: #303030;
    box-shadow: none;
}

.maerev-invoice-main {
    min-height: 780px;
    padding: 52px;
}

.maerev-invoice-header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 54px;
}

.maerev-invoice-seller {
    font-size: 17px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.maerev-invoice-seller-meta {
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
    white-space: pre-line;
}

.maerev-invoice-heading {
    text-align: right;
}

/* Spesifisitas (0,2,1) supaya menang dari heading mode gelap tema
   (html[data-bs-theme=dark] h2), yang kalau lolos jadi putih di atas putih. */
.maerev-tools .maerev-invoice-heading h2 {
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}

.maerev-invoice-number {
    font-size: 13px;
    color: #6b7280;
}

.maerev-invoice-due {
    margin-bottom: 38px;
}

.maerev-invoice-due-label {
    font-size: 13px;
    color: #6b7280;
}

.maerev-invoice-due-amount {
    margin-top: 5px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.maerev-invoice-summary {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #edf0f3;
    border-radius: 12px;
}

.maerev-invoice-summary-value {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.maerev-invoice-summary-sub {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    overflow-wrap: anywhere;
}

/* Nominal tidak boleh terpotong di tengah angka; kalau layar terlalu sempit,
   tabelnya yang digeser horizontal. */
.maerev-invoice-table-wrap {
    overflow-x: auto;
}

.maerev-invoice-table {
    width: 100%;
    border-collapse: collapse;
}

.maerev-invoice-table .text-end {
    white-space: nowrap;
}

.maerev-invoice-table th {
    padding: 0 8px 12px;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 1px solid #e5e7eb;
}

.maerev-invoice-table td {
    padding: 16px 8px;
    font-size: 13px;
    border-bottom: 1px solid #f0f1f3;
}

.maerev-invoice-table td:first-child {
    overflow-wrap: break-word;
}

.maerev-invoice-totals {
    width: min(320px, 100%);
    margin: 26px 0 0 auto;
}

.maerev-invoice-total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}

.maerev-invoice-total-row.is-grand {
    margin-top: 8px;
    padding-top: 13px;
    font-weight: 800;
    border-top: 1px solid #e5e7eb;
}

.maerev-invoice-footer {
    display: flex;
    justify-content: space-between;
    padding: 16px 22px;
    font-size: 11px;
    color: #9ca3af;
    background: #fbfbfc;
    border-top: 1px solid #e5e7eb;
}

.maerev-invoice-footer strong {
    color: #6b7280;
}

/* ---- HPP ---- */

.maerev-hpp-breakdown {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.maerev-hpp-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--tool-line-soft);
}

.maerev-hpp-row.is-total {
    font-size: 16px;
    font-weight: 800;
    border-top: 1px solid var(--tool-line);
    border-bottom: 0;
}

.maerev-hpp-scenarios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.maerev-hpp-scenario {
    padding: 14px;
    background: var(--tool-soft);
    border: 1px solid var(--tool-line);
    border-radius: 12px;
}

.maerev-hpp-scenario-pct {
    font-size: 12px;
    color: var(--tool-muted);
}

.maerev-hpp-scenario-price {
    margin-top: 5px;
    font-size: 18px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* ---- QR ---- */

.maerev-qr-frame {
    display: grid;
    place-items: center;
    min-height: 380px;
    margin-top: 18px;
    padding: 24px;
    background: linear-gradient(180deg, #fff, #fbfbfd);
    border: 1px dashed #d5d8df;
    border-radius: 14px;
}

html[data-bs-theme=dark] .maerev-qr-frame {
    background: #111;
    border-color: #3a3a3a;
}

/* QR dibuat 512px supaya PNG unduhan tetap tajam saat dicetak; di layar
   cukup tampil 280px. */
.maerev-qr-frame canvas,
.maerev-qr-frame img {
    width: 280px;
    max-width: 100%;
    height: auto !important;
}

/* ---- Responsive ---- */

@media (max-width: 991px) {
    .maerev-tool-workspace,
    .maerev-tool-layout {
        grid-template-columns: 1fr;
    }

    .maerev-tool-preview {
        position: static;
    }
}

@media (max-width: 767px) {
    .maerev-tool-tabs {
        width: 100%;
    }

    .maerev-tool-tabs a {
        flex: 1 1 auto;
        padding: 9px 10px;
        font-size: 14px;
        text-align: center;
    }

    .maerev-tool-grid-2,
    .maerev-tool-actions,
    .maerev-hpp-scenarios,
    .maerev-invoice-summary {
        grid-template-columns: 1fr;
    }

    .maerev-invoice-main {
        min-height: 0;
        padding: 28px 20px;
    }

    .maerev-invoice-header {
        gap: 20px;
        margin-bottom: 32px;
    }

    .maerev-invoice-due-amount {
        font-size: 32px;
    }

    .maerev-invoice-table th,
    .maerev-invoice-table td {
        padding-left: 4px;
        padding-right: 4px;
    }

    .maerev-qr-frame {
        min-height: 300px;
        padding: 16px;
    }
}

/* ---- Print (tombol "Print / Save PDF" di Invoice Generator) ----
   Yang tercetak cuma kertas invoice: navbar, footer, CTA, widget WA, dan
   seluruh chrome situs (anak langsung .main-page-wrapper selain section
   tools) disembunyikan. */

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    html,
    body {
        background: #fff !important;
    }

    .main-page-wrapper > :not(.maerev-tools),
    .maerev-tools .maerev-breadcrumb,
    .maerev-tool-hero,
    .maerev-tool-tabs,
    .maerev-tool-editor,
    .maerev-tool-preview-toolbar {
        display: none !important;
    }

    .maerev-tools {
        margin: 0 !important;
        padding: 0 !important;
    }

    .maerev-tools > .container {
        max-width: none;
        padding: 0;
    }

    .maerev-tool-workspace {
        display: block;
    }

    .maerev-tool-preview {
        position: static;
    }

    .maerev-invoice {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .maerev-invoice-main {
        min-height: 0;
        padding: 0;
    }

    .maerev-invoice-footer {
        padding: 14px 0;
        background: #fff;
    }

    .maerev-invoice-table tr {
        break-inside: avoid;
    }
}