/**
 * Torciv Invoice Generator – styles
 * Neutral palette, inherits site font, clean for print & PDF.
 */

.torciv-ig-wrapper {
    --tig-bg: #ffffff;
    --tig-fg: #1f2328;
    --tig-muted: #6b7280;
    --tig-border: #e5e7eb;
    --tig-border-strong: #d1d5db;
    --tig-accent: #1f2328;
    --tig-row-hover: #fafafa;
    --tig-radius: 6px;

    max-width: 900px;
    margin: 24px auto;
    color: var(--tig-fg);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}

.torciv-ig-wrapper *,
.torciv-ig-wrapper *::before,
.torciv-ig-wrapper *::after {
    box-sizing: border-box;
}

/* ---------- Toolbar ---------- */
.torciv-ig-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.torciv-ig-toolbar-bottom {
    justify-content: flex-end;
    margin-top: 16px;
}

.torciv-ig-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.torciv-ig-toolbar-right {
    display: flex;
    gap: 8px;
}

.torciv-ig-logo-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px dashed var(--tig-border-strong);
    border-radius: var(--tig-radius);
    cursor: pointer;
    color: var(--tig-muted);
    background: #fafafa;
    transition: border-color .15s ease, background .15s ease;
}
.torciv-ig-logo-upload:hover {
    border-color: var(--tig-fg);
    background: #f3f4f6;
}
.torciv-ig-logo-upload img {
    max-height: 60px;
    max-width: 180px;
    display: none;
}
.torciv-ig-logo-upload.has-logo {
    border-style: solid;
    padding: 4px 8px;
    background: transparent;
}
.torciv-ig-logo-upload.has-logo .torciv-ig-logo-placeholder { display: none; }
.torciv-ig-logo-upload.has-logo img { display: block; }

/* ---------- Buttons ---------- */
.torciv-ig-btn {
    appearance: none;
    border: 1px solid var(--tig-fg);
    background: transparent;
    color: var(--tig-fg);
    padding: 9px 18px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .05s ease;
}
.torciv-ig-btn:hover { background: var(--tig-fg); color: #fff; }
.torciv-ig-btn:active { transform: translateY(1px); }
.torciv-ig-btn-primary { background: var(--tig-fg); color: #fff; }
.torciv-ig-btn-primary:hover { background: #000; }
.torciv-ig-btn-ghost { border-color: var(--tig-border-strong); color: var(--tig-fg); }

.torciv-ig-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tig-fg);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}
.torciv-ig-link-btn:hover { color: #000; }

/* ---------- Invoice card ---------- */
.torciv-ig-invoice {
    background: var(--tig-bg);
    border: 1px solid var(--tig-border);
    border-radius: 8px;
    padding: 40px;
}

/* ---------- Header ---------- */
.torciv-ig-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tig-border);
}
.torciv-ig-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 260px;
}
.torciv-ig-header-left img {
    max-height: 80px;
    max-width: 220px;
    display: none;
    object-fit: contain;
}
.torciv-ig-header-left img.is-visible { display: block; }

.torciv-ig-from {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.torciv-ig-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 240px;
}

.torciv-ig-title {
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--tig-fg);
    text-transform: none;
}

.torciv-ig-meta-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.torciv-ig-meta-label {
    color: var(--tig-muted);
    font-size: 13px;
    flex-shrink: 0;
}

/* ---------- Inputs ---------- */
.torciv-ig-input {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--tig-border);
    padding: 6px 8px;
    font: inherit;
    font-size: 14px;
    color: var(--tig-fg);
    width: 100%;
    border-radius: 4px;
    transition: border-color .15s ease, background .15s ease;
}
.torciv-ig-input:hover { border-bottom-color: var(--tig-border-strong); }
.torciv-ig-input:focus {
    outline: none;
    border-color: var(--tig-fg);
    background: #fafafa;
}
.torciv-ig-input::placeholder { color: #9ca3af; }

.torciv-ig-input-lg { font-size: 18px; font-weight: 600; }
.torciv-ig-input-meta { max-width: 160px; text-align: right; }
.torciv-ig-input-num { max-width: 110px; text-align: right; }

.torciv-ig-textarea { resize: vertical; min-height: 60px; }

select.torciv-ig-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* ---------- Bill To ---------- */
.torciv-ig-billto {
    padding: 24px 0;
    border-bottom: 1px solid var(--tig-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 360px;
}
.torciv-ig-section-title {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--tig-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* ---------- Items ---------- */
.torciv-ig-items {
    padding: 24px 0;
    border-bottom: 1px solid var(--tig-border);
}
.torciv-ig-items-head,
.torciv-ig-item-row {
    display: grid;
    grid-template-columns: 1fr 80px 120px 120px 32px;
    gap: 8px;
    align-items: center;
}
.torciv-ig-items-head {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tig-muted);
    padding: 0 0 8px 0;
    border-bottom: 1px solid var(--tig-border);
}
.torciv-ig-col-qty,
.torciv-ig-col-price,
.torciv-ig-col-amount { text-align: right; }

.torciv-ig-item-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--tig-border);
}
.torciv-ig-item-row:hover { background: var(--tig-row-hover); }
.torciv-ig-item-row:last-child { border-bottom: 0; }

.torciv-ig-item-row .torciv-ig-input { border-bottom: 0; }
.torciv-ig-item-row .torciv-ig-input:focus { border-color: var(--tig-fg); }

.torciv-ig-item-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 8px;
}

.torciv-ig-remove-item {
    background: none;
    border: 0;
    color: var(--tig-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}
.torciv-ig-remove-item:hover { color: #b91c1c; background: #fef2f2; }

.torciv-ig-add-row {
    padding-top: 12px;
}

/* ---------- Bottom (notes + totals) ---------- */
.torciv-ig-bottom {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    padding-top: 24px;
}
.torciv-ig-notes { display: flex; flex-direction: column; gap: 4px; }

.torciv-ig-totals {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.torciv-ig-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-variant-numeric: tabular-nums;
}
.torciv-ig-totals-label { color: var(--tig-muted); }
.torciv-ig-totals-value { font-weight: 500; }
.torciv-ig-totals-grand {
    border-top: 1px solid var(--tig-border-strong);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 18px;
    font-weight: 700;
}
.torciv-ig-totals-grand .torciv-ig-totals-label,
.torciv-ig-totals-grand .torciv-ig-totals-value { color: var(--tig-fg); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .torciv-ig-invoice { padding: 24px; }
    .torciv-ig-header-right { align-items: flex-start; }
    .torciv-ig-meta-row { justify-content: flex-start; }
    .torciv-ig-input-meta { text-align: left; }
    .torciv-ig-items-head,
    .torciv-ig-item-row {
        grid-template-columns: 1fr 60px 90px 90px 28px;
        font-size: 13px;
    }
    .torciv-ig-bottom {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ---------- Print & PDF (clean) ---------- */
.torciv-ig-pdf-mode .torciv-ig-no-print,
.torciv-ig-pdf-mode .torciv-ig-remove-item { display: none !important; }
.torciv-ig-pdf-mode .torciv-ig-invoice {
    border: 0;
    box-shadow: none;
    padding: 0;
}
.torciv-ig-pdf-mode .torciv-ig-input,
.torciv-ig-pdf-mode .torciv-ig-textarea,
.torciv-ig-pdf-mode select.torciv-ig-input {
    border: 0 !important;
    background: transparent !important;
    padding: 2px 0 !important;
}
.torciv-ig-pdf-mode select.torciv-ig-input { background-image: none; padding-right: 0; }
.torciv-ig-pdf-mode .torciv-ig-items-head,
.torciv-ig-pdf-mode .torciv-ig-item-row {
    grid-template-columns: 1fr 80px 120px 120px;
}
.torciv-ig-pdf-mode .torciv-ig-item-row:hover { background: transparent; }

@media print {
    body * { visibility: hidden; }
    #torciv-ig-app, #torciv-ig-app * { visibility: visible; }
    #torciv-ig-app {
        position: absolute;
        left: 0; top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .torciv-ig-no-print { display: none !important; }
    .torciv-ig-invoice {
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .torciv-ig-input,
    .torciv-ig-textarea,
    select.torciv-ig-input {
        border: 0 !important;
        background: transparent !important;
        padding: 2px 0 !important;
    }
    select.torciv-ig-input { background-image: none !important; }
    .torciv-ig-item-row { page-break-inside: avoid; }
    .torciv-ig-items-head,
    .torciv-ig-item-row {
        grid-template-columns: 1fr 80px 120px 120px !important;
    }
    .torciv-ig-remove-item { display: none !important; }
}