/* Jobs, quotes & invoices */
.jnav { margin: 0 0 18px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .jnav::-webkit-scrollbar { display: none; } .jnav button { white-space: nowrap; }
.jstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; }
.jstat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; } .jstat span { color: var(--muted); font-size: 13px; font-weight: 600; } .jstat b { display: block; font-size: 26px; letter-spacing: -.02em; margin: 2px 0; } .jstat small { color: var(--muted); }
.jstat.bad { border-color: #ef4444; background: linear-gradient(180deg, rgba(239,68,68,.1), var(--card)); } .jstat.bad b { color: #ef4444; } .jstat.good b { color: #10b981; }
.jquick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.jgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.jrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; padding: 11px 6px; cursor: pointer; border-radius: 8px; transition: background-color .15s; }
.jrow:last-child { border-bottom: 0; } .jrow:hover { background: var(--accent-soft); } .jrow b { display: block; } .jrow span { color: var(--muted); font-size: 13px; } .jrow .amt { font-weight: 700; color: var(--text); font-size: 15px; white-space: nowrap; } .jrow .when { white-space: nowrap; font-size: 13px; }
.lbl.bad { color: #ef4444; }
.toolbar .grow { flex: 1; }
.jbadge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(148,163,184,.2); color: var(--muted); }
.jbadge.sent, .jbadge.scheduled, .jbadge.quoted { background: rgba(59,130,246,.16); color: #3b82f6; } .jbadge.accepted, .jbadge.paid, .jbadge.done { background: rgba(16,185,129,.16); color: #10b981; }
.jbadge.overdue, .jbadge.declined, .jbadge.void, .jbadge.expired { background: rgba(239,68,68,.15); color: #ef4444; } .jbadge.in_progress { background: rgba(245,158,11,.18); color: #d97706; } .jbadge.lead { background: rgba(139,92,246,.16); color: #8b5cf6; }
.jtable { width: 100%; border-collapse: collapse; font-size: 14px; } .jtable th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .jtable td { padding: 11px 10px; border-bottom: 1px solid var(--line); } .jtable tr[data-doc] { cursor: pointer; transition: background-color .15s; } .jtable tr[data-doc]:hover { background: var(--accent-soft); } .jtable .r { text-align: right; white-space: nowrap; }
.jcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.jcard { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.jcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); } .jcard .top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .jcard span { font-size: 13.5px; } .jcard .when { color: var(--accent); font-weight: 600; }

.docdlg { width: min(860px, 96vw); max-height: 94vh; overflow: auto; padding: 0; scrollbar-width: thin; } .jobdlg { width: min(640px, 96vw); }
.docdlg form { padding: 20px 24px; } .dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .dhead h3 { margin: 0; flex: 1; font-size: 20px; } .lockmsg { background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; margin: 6px 0 10px; }
.docdlg .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .docdlg .grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.docdlg select, .docdlg textarea { width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } .docdlg textarea { resize: vertical; }
.quickbox { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .quickbox input { flex: 1; min-width: 150px; margin: 0; }
.litems { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lhead, .lrow { display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px 96px 100px 34px; gap: 8px; align-items: center; padding: 8px 10px; }
.lhead { background: var(--accent-soft); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .lrow { border-top: 1px solid var(--line); } .lrow input { margin: 0; padding: 8px 10px; min-width: 0; } .lrow .la { font-weight: 650; white-space: nowrap; } .r { text-align: right; }
#dAddLine { margin-top: 10px; }
.dtotals { align-self: end; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-top: 12px; } .dtotals div { display: flex; justify-content: space-between; padding: 4px 0; } .dtotals .grand { border-top: 2px solid var(--text); margin-top: 6px; padding-top: 8px; font-size: 18px; font-weight: 800; }
.dfoot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; } .dfoot .l, .dfoot .r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .dfoot .r { margin-left: auto; justify-content: flex-end; } .dfoot .btn.small { text-decoration: none; }
.jdocs { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
@media (max-width: 860px) {
  .jgrid, .docdlg .grid2, .docdlg .grid3 { grid-template-columns: 1fr; }
  .lhead { display: none; }
  .lrow { grid-template-columns: 1fr 1fr 1fr 34px; grid-template-areas: "d d d x" "q u p a"; row-gap: 8px; } .lrow .ld { grid-area: d; } .lrow .lq { grid-area: q; } .lrow .lu { grid-area: u; } .lrow .lp { grid-area: p; } .lrow .la { grid-area: a; grid-column: 4; align-self: center; font-size: 12.5px; } .lrow > :last-child { grid-area: x; }
  .docdlg form { padding: 16px 14px; } .jtable th:nth-child(3), .jtable td:nth-child(3) { display: none; }
}