/* Contract & payments (Overview panel) + the invoice viewer + the invoice fields in the CRM */

/* ---------- Overview panel ---------- */
#view-analytics .ov-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view-analytics #ov-billing-panel { gap: 0; }
#view-analytics .inv-kpis { margin-bottom: 14px; }
#view-analytics .inv-kpi .ov-kpi-value { font-size: 28px; }
#view-analytics .inv-kpi.paid { border-color: #BFE3CE; background: linear-gradient(160deg, #fff 0%, #F1FAF5 100%); }
#view-analytics .inv-kpi.paid .ov-kpi-label { color: #1F8A57; }
#view-analytics .inv-kpi.open { border-color: #F3E4C6; background: linear-gradient(160deg, #fff 0%, #FDF7EA 100%); }
#view-analytics .inv-kpi.open .ov-kpi-label { color: #9A6B12; }
#view-analytics .inv-kpi.late { border-color: #F2D1D1; background: linear-gradient(160deg, #fff 0%, #FDF0F0 100%); }
#view-analytics .inv-kpi.late .ov-kpi-label { color: #B94A4A; }
#view-analytics .inv-warn { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 14px; padding: 10px 14px; border-radius: 12px; background: #FDF6EA; border: 1px solid #F3E4C6; color: #8A5E10; font-size: 12.5px; font-weight: 600; }
#view-analytics .inv-warn i { font-size: 16px; margin-top: 1px; }
#view-analytics .inv-contract { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: var(--bg-surface, #fff); border: 1px solid var(--L-line, var(--border-subtle)); border-radius: 14px; padding: 14px 18px; }
#view-analytics .inv-contract span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
#view-analytics .inv-contract b { font-size: 14px; font-weight: 750; color: var(--text-primary); }
#view-analytics .inv-contract b.muted { color: #A2A2AC; font-weight: 600; }
#view-analytics .inv-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: #3E5FD0; text-decoration: none; }
#view-analytics .inv-link:hover { text-decoration: underline; }
@media (max-width: 900px) { #view-analytics .inv-contract { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

#view-analytics .inv-list { display: flex; flex-direction: column; gap: 10px; }
#view-analytics .inv-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(130px, .9fr) minmax(160px, 1.2fr) minmax(150px, 1fr) auto; gap: 14px; align-items: center; background: var(--bg-surface, #fff); border: 1px solid var(--L-line, var(--border-subtle)); border-radius: 13px; padding: 12px 16px; box-shadow: var(--L-card-shadow, none); }
#view-analytics .inv-row.none { background: rgba(255, 255, 255, .55); border-style: dashed; box-shadow: none; }
#view-analytics .inv-num b { display: block; font-size: 14px; font-weight: 750; color: var(--text-primary); }
#view-analytics .inv-num span { display: block; margin-top: 2px; font-size: 12px; font-weight: 550; color: var(--text-muted); }
#view-analytics .inv-per { font-size: 13px; font-weight: 600; color: var(--text-secondary, #55555F); }
#view-analytics .inv-amt { font-size: 14px; font-weight: 750; color: var(--text-primary); font-variant-numeric: tabular-nums; }
#view-analytics .inv-amt small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 550; color: var(--text-muted); }
#view-analytics .inv-act { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 1100px) { #view-analytics .inv-row { grid-template-columns: 1fr 1fr; } #view-analytics .inv-act { justify-content: flex-start; } }

.inv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #F1F1F3; color: #5C5C68; }
.inv-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.inv-pill.paid { background: #E9F5EF; color: #1F8A57; }
.inv-pill.open { background: #FDF3DF; color: #9A6B12; }
.inv-pill.late { background: #FBEAEA; color: #B94A4A; }

.inv-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid #DADADF; background: #fff; color: #1A1A1D; font: 650 13px/1 inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(25, 25, 28, .06); }
.inv-btn:hover { background: #F7F7F8; border-color: #BEBEC6; }
.inv-btn:disabled { opacity: .5; cursor: default; }
.inv-btn.primary { background: #19191C; border-color: #19191C; color: #fff; }
.inv-btn.primary:hover { background: #2B2B30; }

/* ---------- Invoice viewer ---------- */
.inv-modal-bg { position: fixed; inset: 0; z-index: 100000; background: rgba(18, 18, 20, .55); display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; overflow-y: auto; }
.inv-modal { width: min(834px, 100%); display: flex; flex-direction: column; gap: 12px; }
.inv-modal-bar { display: flex; align-items: center; gap: 12px; color: #fff; }
.inv-modal-bar b { font-size: 16px; font-weight: 800; }
.inv-modal-bar span { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.inv-modal-act { margin-left: auto; display: flex; gap: 8px; }
.inv-modal-body { background: #fff; border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5); overflow: hidden; display: flex; justify-content: center; }

/* ---------- CRM: invoice details + invoice link in the month rows ---------- */
.sc-inv-hint { margin-left: 8px; font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #8D8D9A; }
.sc-inv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 22px; }
.sc-inv-form .full { grid-column: 1 / -1; }
.sc-inv-form textarea.sc-input { resize: vertical; min-height: 56px; font-family: inherit; }
.sc-month-name em.inv { margin-top: 6px; }
.sc-inv-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid #DCDCE1; background: #fff; color: #2A2A31; font: 650 12px/1.2 inherit; cursor: pointer; }
.sc-inv-link:hover { background: #F4F4F6; border-color: #B8B8C2; }
.sc-inv-link.none { border-style: dashed; color: #6B6B78; font-weight: 600; }
.sc-share-inv { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 8px; background: #F1F1F3; color: #55555F; font-size: 11.5px; font-weight: 700; white-space: nowrap; }

/* ---------- Invoice that still has to be sent to the client: deep red glow (owners only) ---------- */
#view-analytics .inv-kpi.send { border-color: #D9707B; background: linear-gradient(160deg, #FFF7F8 0%, #FBE6E9 100%); box-shadow: 0 0 0 3px rgba(190, 45, 65, .12), 0 10px 26px -10px rgba(190, 45, 65, .42); }
#view-analytics .inv-kpi.send .ov-kpi-label { color: #A92B40; }
#view-analytics .inv-kpi.send .ov-kpi-value { color: #8E1F33; }
#view-analytics .inv-row.needs-send {
    border-color: #D9707B; background: linear-gradient(160deg, #FFF8F9 0%, #FCEBEE 100%);
    box-shadow: 0 0 0 3px rgba(190, 45, 65, .11), 0 10px 24px -12px rgba(190, 45, 65, .45);
    animation: inv-send-glow 3.2s ease-in-out infinite;
}
@keyframes inv-send-glow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(190, 45, 65, .10), 0 8px 20px -12px rgba(190, 45, 65, .38); }
    50% { box-shadow: 0 0 0 4px rgba(190, 45, 65, .17), 0 12px 28px -12px rgba(190, 45, 65, .55); }
}
@media (prefers-reduced-motion: reduce) { #view-analytics .inv-row.needs-send { animation: none; } }
.inv-pill.send { background: #FBE3E7; color: #A92B40; }
.inv-btn.send { background: #A92B40; border-color: #A92B40; color: #fff; }
.inv-btn.send:hover { background: #8E1F33; border-color: #8E1F33; }
.inv-btn.sent { color: #1F8A57; border-color: #BFE3CE; background: #F3FAF6; }
.inv-btn.sent:hover { background: #E9F5EF; }
.sc-inv-link.needs-send { color: #A92B40; border-color: #D9707B; background: #FCEBEE; box-shadow: 0 0 0 3px rgba(190, 45, 65, .12); }

/* CRM: billing cycle picker */
.sc-cycle { margin-top: 14px; }
.sc-cycle select { width: 100%; }