/* modals/css/invoice-modal.css
   Global Invoice Modal styling. Prefixed `inv-mod-` so it doesn't
   collide with anything else in the modals stack. Loaded by the JS so
   the host page doesn't have to remember to include it.

   Styled to match the canonical ARK modal style (srm-* family, used by
   the sitetask-related-modal and others): dark blue header (#01273e),
   tight 12-13px fonts, compact padding, light-grey footer. Same visual
   language as the Add Expense modal, the Followup modal, etc. */

#invoiceModalRoot {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1100;
}
#invoiceModalRoot.open { display: block; }

.inv-mod-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
}
.inv-mod-shell {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 16px; box-sizing: border-box;
    pointer-events: none;
}
.inv-mod-card {
    background: #fff; border-radius: 4px;
    width: 100%; max-width: 1100px;
    max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    pointer-events: auto;
    animation: invModSlide 0.18s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes invModSlide {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header bar — matches .srm-header ───────────────────────────────── */
.inv-mod-head {
    background: #01273e; color: #fff;
    padding: 10px 16px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.inv-mod-title {
    margin: 0;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 7px;
}
.inv-mod-title i { opacity: 0.85; font-size: 12px; }
.inv-mod-close {
    background: none; border: none;
    color: rgba(255,255,255,0.7);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.inv-mod-close:hover { color: #fff; }

.inv-mod-body {
    padding: 14px 16px;
    overflow-y: auto; flex: 1; min-height: 0;
    font-size: 12px;
}
.inv-mod-loading, .inv-mod-err {
    padding: 20px; text-align: center; color: #6c757d; font-size: 12px;
}
.inv-mod-err { color: #842029; }

/* ── Header summary card ── */
.inv-mod-header-card {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 3px;
    margin-bottom: 10px;
}
.inv-mod-h-left { flex: 1 1 0; min-width: 0; }
.inv-mod-invoicenum {
    font-size: 16px; font-weight: 700; color: #01273e;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.inv-mod-vendor, .inv-mod-site {
    font-size: 12px; color: #495057; margin-top: 3px;
}
.inv-mod-vendor i, .inv-mod-site i {
    opacity: 0.6; margin-right: 4px; font-size: 10px;
}
.inv-mod-site { color: #6c757d; }
.inv-mod-project { color: #0a58ca; font-weight: 600; }

.inv-mod-h-right { text-align: right; flex: 0 0 auto; }
.inv-mod-status {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px;
}
.inv-mod-status-pending  { background: #fff3cd; color: #664d03; }
.inv-mod-status-approved { background: #d1e7dd; color: #0f5132; }
.inv-mod-status-rejected { background: #f8d7da; color: #842029; }
.inv-mod-status-paid     { background: #cfe2ff; color: #084298; }
.inv-mod-status-default  { background: #e9ecef; color: #495057; }

.inv-mod-h-totals { margin-top: 6px; }
.inv-mod-h-totals-row {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 11px; padding: 1px 0;
    font-variant-numeric: tabular-nums;
}
.inv-mod-h-totals-row .inv-mod-h-l { color: #6c757d; }
.inv-mod-h-totals-row .inv-mod-h-v { font-weight: 600; color: #01273e; }
.inv-mod-variance-pos .inv-mod-h-v { color: #0f5132; }
.inv-mod-variance-neg .inv-mod-h-v { color: #842029; }

/* ── Dates strip + stats strip ── */
.inv-mod-dates, .inv-mod-stats {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 10px;
    background: #fff; border: 1px solid #e9ecef; border-radius: 3px;
    font-size: 11px;
}
.inv-mod-dates > div { white-space: nowrap; color: #495057; }
.inv-mod-dl {
    display: inline-block; margin-right: 4px;
    color: #6c757d; font-weight: 600;
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px;
}
.inv-mod-stats > div { color: #495057; }
.inv-mod-stats strong { color: #01273e; font-size: 12px; margin-right: 2px; }

/* ── Header edit-mode form (replaces per-field click-to-edit) ──
   Edit button toggles the entire summary card into a form mirroring
   the srm-* modal pattern (Add Expense, Followup, etc.). */
.inv-mod-header-edit-btn {
    background: #fff; color: #495057;
    border: 1px solid #ced4da; border-radius: 3px;
    padding: 4px 10px; font-size: 11px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 6px;
}
.inv-mod-header-edit-btn:hover { background: #e9ecef; border-color: #adb5bd; }
.inv-mod-header-edit-btn i { font-size: 10px; }

.inv-mod-header-edit {
    /* Override the .inv-mod-header-card flex layout so the form rows
       inside fill the full card width instead of hugging the left under
       the inherited align-items: flex-start. */
    display: block !important;
    background: #f8f9fa;
    padding: 12px 14px;
}
.inv-mod-header-edit-title {
    font-size: 12px; font-weight: 700; color: #01273e;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.inv-mod-header-edit-title i { color: #6c757d; font-size: 11px; }

.inv-mod-form-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px 12px; margin-bottom: 8px;
}
.inv-mod-form-row.inv-mod-form-row-1 { grid-template-columns: 1fr; }
.inv-mod-form-group { display: flex; flex-direction: column; min-width: 0; }
.inv-mod-form-group label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.3px; color: #495057; margin-bottom: 3px;
}
.inv-mod-form-group input,
.inv-mod-form-group select,
.inv-mod-form-group textarea {
    width: 100%; padding: 5px 7px;
    border: 1px solid #ced4da; border-radius: 3px;
    font-size: 12px; box-sizing: border-box;
    background: #fff; font-family: inherit;
}
.inv-mod-form-group input:focus,
.inv-mod-form-group select:focus,
.inv-mod-form-group textarea:focus {
    border-color: #01273e;
    box-shadow: 0 0 0 2px rgba(1,39,62,0.12); outline: none;
}
/* min-height + !important — something in the cascade (likely table-cell
   or bootstrap form-control rule) was capping height. min-height lets
   the browser's intrinsic select height take over when it needs more.
   36px is the empirical sweet spot where Chrome/Edge/Firefox all stop
   clipping the value text + descenders. */
.inv-mod-form-group select,
.inv-mod-form-group input[type="date"],
.inv-mod-form-group input[type="number"],
.inv-mod-form-group input[type="text"] {
    min-height: 36px !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
}
.inv-mod-form-group select { padding-right: 28px !important; }
.inv-mod-form-group textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

/* Modal footer — Delete on the left, Cancel/Save (or Close/Edit) on the right.
   Matches the srm-* modal footer style: light grey background, top border,
   8px×14px padding. Buttons stack horizontally. Empty until renderFooter()
   runs (i.e. until invoice data has loaded). */
.inv-mod-footer {
    padding: 8px 14px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
    min-height: 38px;
}
.inv-mod-footer:empty { display: none; }
.inv-mod-footer-right { display: flex; gap: 8px; }
.inv-mod-btn-delete {
    background: #fff; color: #dc3545; border-color: #f5c2c7;
}
.inv-mod-btn-delete:hover:not(:disabled) { background: #fdeded; }

.inv-mod-header-edit-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 6px; padding-top: 8px;
    border-top: 1px solid #e9ecef;
}
.inv-mod-btn {
    padding: 6px 14px; font-size: 12px; font-weight: 500;
    border: 1px solid transparent; border-radius: 3px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.inv-mod-btn-cancel { background: #fff; color: #495057; border-color: #ced4da; }
.inv-mod-btn-cancel:hover:not(:disabled) { background: #e9ecef; }
.inv-mod-btn-save { background: #01273e; color: #fff; border-color: #01273e; }
.inv-mod-btn-save:hover:not(:disabled) { background: #013a5e; }
.inv-mod-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Dates inline under the vendor/site lines in display mode. */
.inv-mod-header-dates {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 6px;
    font-size: 11px; color: #495057;
}
.inv-mod-header-dates strong {
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px;
    color: #6c757d; margin-right: 3px;
}

/* ── Legacy inline header editable fields (kept for back-compat — no
      longer used by render but referenced by older code paths) ── */
.inv-mod-edit-field {
    cursor: pointer;
    position: relative;
    padding-right: 14px;
    transition: background 0.12s;
    border-radius: 2px;
}
.inv-mod-edit-field:hover {
    background: rgba(10, 88, 202, 0.08);
}
.inv-mod-edit-field .inv-mod-edit-hint {
    position: absolute; right: 1px; top: 50%;
    transform: translateY(-50%);
    font-size: 9px; opacity: 0;
    color: #0a58ca;
    transition: opacity 0.12s;
    pointer-events: none;
}
.inv-mod-edit-field:hover .inv-mod-edit-hint { opacity: 0.7; }
.inv-mod-inline-edit {
    border: 1px solid #01273e; border-radius: 3px;
    padding: 3px 6px; font-size: 12px; font-family: inherit;
    color: inherit; background: #fff;
    min-width: 80px;
}
.inv-mod-inline-edit:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(1,39,62,0.12);
}
input.inv-mod-inline-edit[type="number"] { text-align: right; }
.inv-mod-status-wrap { margin-bottom: 4px; }

/* ── Attachments — twin section (INV-U4 / INV-U9) ──
   Two side-by-side groups: Invoice PDF (left) and Supporting Documents
   (right), matching the sub portal categorization. Stacks vertically on
   narrow viewports. */
.inv-mod-attach-twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}
@media (max-width: 720px) {
    .inv-mod-attach-twin { grid-template-columns: 1fr; }
}
.inv-mod-attach-group {
    padding: 10px 12px;
    border: 1px solid #e9ecef; border-radius: 3px;
    background: #fff;
    display: flex; flex-direction: column;
}
.inv-mod-attach-group-invoice .inv-mod-attach-head i { color: #842029; }
.inv-mod-attach-group-supporting .inv-mod-attach-head i { color: #084298; }
.inv-mod-attach-group-other { grid-column: 1 / -1; background: #fffaf0; }

/* Legacy single-section selector kept for the back-compat wrapper. */
.inv-mod-attach-wrap {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #e9ecef; border-radius: 3px;
    background: #fff;
}
.inv-mod-attach-head {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700;
    color: #495057; text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 7px;
}
.inv-mod-attach-head i { color: #6c757d; }
.inv-mod-attach-count {
    background: #e9ecef; color: #495057;
    padding: 1px 7px; border-radius: 9px;
    font-size: 10px; font-weight: 700;
}
.inv-mod-attach-list {
    margin-bottom: 7px;
    background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 3px;
}
.inv-mod-attach-row {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 10px;
    border-bottom: 1px solid #f1f3f5;
    font-size: 12px;
}
.inv-mod-attach-row:last-child { border-bottom: none; }
.inv-mod-attach-file {
    color: #01273e; text-decoration: none; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60%;
}
.inv-mod-attach-file i { margin-right: 4px; opacity: 0.7; font-size: 11px; }
.inv-mod-attach-file:hover { text-decoration: underline; color: #013a5e; }
.inv-mod-attach-meta {
    flex: 1; text-align: right;
    color: #6c757d; font-size: 11px;
}
.inv-mod-attach-rm {
    background: transparent; border: none;
    color: #dc3545; cursor: pointer;
    font-size: 14px; padding: 0 6px; line-height: 1;
}
.inv-mod-attach-rm:hover { color: #842029; }

.inv-mod-attach-drop {
    text-align: center; padding: 16px 10px;
    background: #f8f9fa;
    border: 2px dashed #ced4da; border-radius: 4px;
    color: #6c757d; font-size: 12px;
    transition: all 0.15s;
    cursor: pointer;
}
.inv-mod-attach-drop:hover { background: #e9ecef; border-color: #adb5bd; }
.inv-mod-attach-drop i { font-size: 16px; opacity: 0.6; display: block; margin-bottom: 4px; }
.inv-mod-attach-drop strong { color: #495057; }
.inv-mod-attach-drop a { color: #01273e; text-decoration: none; font-weight: 600; }
.inv-mod-attach-drop a:hover { text-decoration: underline; color: #013a5e; }
.inv-mod-attach-drop.inv-mod-attach-over {
    background: #e7f1ff; border-color: #01273e; color: #01273e;
}
.inv-mod-attach-drop.inv-mod-attach-uploading {
    background: #fff3cd; border-color: #ffc107; color: #856404;
}
.inv-mod-attach-hint {
    font-size: 10px; color: #adb5bd; margin-top: 3px;
}

/* Line flash — brief highlight when opening from a specific line. */
@keyframes inv-mod-flash {
    0%   { background: #fff3cd; }
    50%  { background: #ffe69a; }
    100% { background: inherit; }
}
.inv-mod-line-flash > td { animation: inv-mod-flash 1.5s ease-out; }

/* ── Lines toolbar + footer + editor (INV-T5) ── */
.inv-mod-lines-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.inv-mod-add-line {
    background: #01273e; color: #fff;
    border: 1px solid #01273e;
    padding: 5px 12px; border-radius: 3px;
    cursor: pointer; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 5px;
}
.inv-mod-add-line:hover { background: #013a5e; }
.inv-mod-lines-help { font-size: 10px; color: #6c757d; }
.inv-mod-lines-footer td {
    background: #f8f9fa;
    border-top: 2px solid #01273e !important;
    padding: 8px 10px;
}
.inv-mod-lines-footer-l {
    text-align: right; font-weight: 600; color: #495057;
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px;
}
.inv-mod-variance-pos  { color: #0f5132; font-weight: 600; font-size: 11px; }
.inv-mod-variance-neg  { color: #842029; font-weight: 600; font-size: 11px; }
.inv-mod-variance-zero { color: #495057; font-weight: 600; font-size: 11px; }
.inv-mod-muted { color: #adb5bd; font-size: 11px; font-style: italic; }

.inv-mod-acts { width: 70px; text-align: center; }
.inv-mod-row-acts {
    display: inline-flex; gap: 3px;
}
.inv-mod-icon-btn {
    background: #fff; border: 1px solid #ced4da;
    padding: 3px 7px; border-radius: 3px;
    cursor: pointer; font-size: 10px;
    color: #495057;
}
.inv-mod-icon-btn:hover { background: #e9ecef; border-color: #adb5bd; }
.inv-mod-icon-btn:disabled { opacity: 0.5; cursor: wait; }
.inv-mod-icon-del:hover { background: #fdeded; border-color: #f5c2c7; color: #842029; }
.inv-mod-icon-save {
    background: #01273e; border-color: #01273e; color: #fff;
}
.inv-mod-icon-save:hover { background: #013a5e; border-color: #013a5e; }

/* Expense Type picker + derived Category readout per line (INV-U7). */
.inv-mod-line-edit .inv-mod-edit-type {
    width: 100%;
}
.inv-mod-edit-cat {
    margin-top: 4px;
    font-size: 10px; color: #6c757d;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-mod-edit-cat-val {
    color: #01273e; font-weight: 600;
    text-transform: none; letter-spacing: 0;
}

/* Read-only badge under the CLIN cell showing Type / Category. */
.inv-mod-type-badge {
    display: flex; gap: 4px; flex-wrap: wrap;
    margin-top: 4px;
}
.inv-mod-type-badge .inv-mod-cat,
.inv-mod-type-badge .inv-mod-typ {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    white-space: nowrap;
}
.inv-mod-type-badge .inv-mod-cat { background: #cfe2ff; color: #084298; }
.inv-mod-type-badge .inv-mod-typ { background: #e9ecef; color: #495057; }

/* Editor row — fields fill their cells; help text small under the PO picker. */
.inv-mod-line-edit td {
    background: #fff8e1 !important;
}
.inv-mod-line-edit select,
.inv-mod-line-edit input {
    width: 100% !important;
    min-height: 34px !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 5px 8px !important;
    border: 1px solid #ced4da !important; border-radius: 3px !important;
    font-size: 12px !important; box-sizing: border-box !important;
    background: #fff !important;
}
.inv-mod-line-edit select { padding-right: 24px !important; }
.inv-mod-line-edit input[type="number"] { text-align: right; }
.inv-mod-edit-help {
    margin-top: 3px; font-size: 10px; color: #6c757d; font-style: italic;
}

/* Site-mode line editor — derived Category column.
   Mirrors the look of a read-only display cell so admin can see the
   live category that will be stamped on save. */
.inv-mod-derived-cat {
    display: inline-block;
    padding: 4px 8px;
    background: #cfe2ff; color: #084298;
    border-radius: 4px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-mod-derived-cat .inv-mod-empty-cell {
    background: transparent; color: #adb5bd;
    text-transform: none; letter-spacing: 0; font-weight: 400;
    padding: 0;
}

/* ── Lines table ── */
.inv-mod-lines-wrap { margin-bottom: 10px; }
.inv-mod-lines {
    width: 100%; border-collapse: collapse;
    font-size: 11px;
}
.inv-mod-lines thead th {
    background: #f8f9fa; color: #495057;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 8px;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
}
.inv-mod-lines thead th.inv-mod-amt { text-align: right; }
.inv-mod-lines tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: top;
}
.inv-mod-lines tbody tr:last-child td { border-bottom: none; }
.inv-mod-lines tbody tr:hover { background: #f8fafc; }

.inv-mod-st-link {
    color: #01273e; text-decoration: none; font-weight: 600;
}
.inv-mod-st-link:hover { text-decoration: underline; color: #013a5e; }
.inv-mod-st-link i { font-size: 9px; opacity: 0.7; margin-right: 3px; }

.inv-mod-po-status {
    display: inline-block; padding: 1px 5px; border-radius: 8px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-left: 3px;
}
.inv-mod-po-issued    { background: #cfe2ff; color: #084298; }
.inv-mod-po-draft     { background: #e9ecef; color: #495057; }
.inv-mod-po-closed    { background: #d1e7dd; color: #0f5132; }
.inv-mod-po-cancelled { background: #f8d7da; color: #842029; }
.inv-mod-po-scope {
    font-size: 10px; color: #6c757d; margin-top: 2px;
    max-width: 240px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

.inv-mod-clin-section {
    font-size: 9px; color: #6c757d;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.inv-mod-clin-num { font-weight: 600; color: #0f5132; }

.inv-mod-amt { text-align: right; font-variant-numeric: tabular-nums; }
.inv-mod-amt-val { font-weight: 600; color: #01273e; }

.inv-mod-desc {
    max-width: 240px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

.inv-mod-empty {
    text-align: center; color: #adb5bd; padding: 22px; font-style: italic;
}
.inv-mod-empty-cell { color: #adb5bd; font-size: 11px; font-style: italic; }

/* ── Notes ── */
.inv-mod-notes {
    margin-top: 10px; padding: 8px 12px;
    background: #fff3cd; border: 1px solid #ffe69c; border-radius: 3px;
    font-size: 11px; color: #495057;
}
.inv-mod-notes > div { padding: 2px 0; }
.inv-mod-notes strong { color: #664d03; }


/* Send AP Email button (invoice modal footer) */
.inv-mod-btn-ap {
    background: #fff; color: #01273e; border-color: #01273e;
}
.inv-mod-btn-ap:hover:not(:disabled) {
    background: #01273e; color: #fff;
}
.inv-mod-btn-ap-sent {
    background: #f0fdf4; color: #15803d; border-color: #86efac;
}
.inv-mod-btn-ap-sent:hover:not(:disabled) {
    background: #dcfce7; border-color: #4ade80;
}