/* ==========================================================================
   Invoice Forms — Base Styles
   Shared patterns for .invoice-import and .invoice-manual
   ========================================================================== */

:root {
    --inv-bg:           #f8f5f2;
    --inv-accent:       #e73801;
    --inv-text:         #1c1c1c;
    --inv-muted:        #6b6b6b;
    --inv-border:       #ccc9c5;
    --inv-success:      #2a6e3a;
    --inv-success-bg:   #edf7f0;
    --inv-error-bg:     #fdf0ec;
    --inv-radius:       4px;
    --inv-gap:          1.25rem;
}



/* --------------------------------------------------------------------------
   Message bar  (hidden while empty)
   -------------------------------------------------------------------------- */
.invoice_field {
    border: 0.125em solid var(--inv-text);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    position: relative;
}
.invoice_field > label {
    position: absolute;
    top: 0; left: 2rem;
    font-size: 0.75em;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    height: 1rem; line-height: 1rem;
    padding: 0 0.5rem;
    transform: translate(0,-50%);
    color: var(--inv-text);
    background-color: var(--inv-bg);
}

.invoice_field:has(> input[type="text"]) { padding: 0;}
.invoice_field > input[type="text"] { background-color: transparent;}

.invoice_field:has(> input[type="date"]) { padding: 0;}
.invoice_field > input[type="date"] { background-color: transparent;}

.invoice_field:has(> input[type="number"]) { padding: 0;}
.invoice_field > input[type="number"] { background-color: transparent;}



.invoice_field.invoice_field--error { border-color: var(--inv-accent);}
.invoice_field.invoice_field--error > label { color: var(--inv-accent); }
/*
.invoice_field select, 
.invoice_field textarea, 
.invoice_field input:not([type="checkbox"],[type="radio"],[type="file"],[type="submit"]) {
    background-color: rgba(255,255,255,0.3);
}
    */

/* --------------------------------------------------------------------------
   Message bar  (hidden while empty)
   -------------------------------------------------------------------------- */

.invoice-import__messages,
.invoice-manual__messages {
    padding: 0.75rem 1rem;
    border-radius: var(--inv-radius);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--inv-gap);
    border-left: 3px solid transparent;
}

.invoice-import__messages:empty,
.invoice-manual__messages:empty {
    display: none;
}

.invoice-import__messages--success,
.invoice-manual__messages--success {
    color: var(--inv-success);
    background: var(--inv-success-bg);
    border-left-color: var(--inv-success);
}

.invoice-import__messages--error,
.invoice-manual__messages--error {
    color: var(--inv-accent);
    background: var(--inv-error-bg);
    border-left-color: var(--inv-accent);
}


/* --------------------------------------------------------------------------
   Actions row  (button + spinner)
   -------------------------------------------------------------------------- */

.invoice-import__actions,
.invoice-manual__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.invoice-import__submit,
.invoice-manual__submit {
    padding: 0.675em 1.75em;
    background: var(--inv-accent);
    color: #fff;
    border: none;
    border-radius: 4em;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.invoice-import__submit:hover,
.invoice-manual__submit:hover {
    opacity: 0.85;
}

.invoice-import__submit:disabled,
.invoice-manual__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.invoice-import__spinner,
.invoice-manual__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--inv-border);
    border-top-color: var(--inv-accent);
    border-radius: 50%;
    animation: inv-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes inv-spin {
    to { transform: rotate(360deg); }
}


/* --------------------------------------------------------------------------
   CSV example  (details / summary)
   -------------------------------------------------------------------------- */

.invoice-import__example {
    margin-top: 2rem;
    color: var(--inv-muted);
}

.invoice-import__example summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--inv-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.invoice-import__example summary::before {
    content: '+';
    color: var(--inv-accent);
    font-size: 1rem;
    line-height: 1;
}

.invoice-import__example[open] summary::before {
    content: '−';
}

.invoice-import__example pre {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f4f2ef;
    border-radius: var(--inv-radius);
    font-size: 0.78rem;
    line-height: 1.6;
    overflow-x: auto;
    color: var(--inv-text);
}

.invoice-import__example p {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}


/* --------------------------------------------------------------------------
   Access denied
   -------------------------------------------------------------------------- */

.invoice-import__access-denied,
.invoice-manual__access-denied {
    font-size: 0.9rem;
    color: var(--inv-muted);
}