/* =====================================================================
   Document Processing (views/docproc.js, views/docproc-panels.js)
   Builds on app.css (cards, tabs, tables), media.css (file frames, receipt
   cards) and achievements.css (calendar grid, tiles).
   ===================================================================== */
.dp-nav { margin-bottom: 18px; }
.dp-nav a { display: inline-flex; align-items: center; gap: 6px; }
.dp-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dp-toolbar .spacer, .dp-tl-head .spacer, .filters .spacer { flex: 1; }
.dp-filters { flex-wrap: wrap; }
.dp-ref { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.dp-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* status, priority, due */
.dp-status { --sc: #6B7894; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 99px; white-space: nowrap;
  color: color-mix(in srgb, var(--sc) 82%, var(--ink)); background: color-mix(in srgb, var(--sc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); }
.dp-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); }
.dp-status-btn { border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.dp-status-btn:hover .dp-status { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent); }
.dp-prio { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.dp-prio.urgent { background: color-mix(in srgb, #E5484D 16%, transparent); color: #C2272D; }
.dp-prio.high { background: color-mix(in srgb, #E86A2C 16%, transparent); color: #B84A12; }
.dp-prio.low { background: var(--surface-2); color: var(--muted); }
.dp-due { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.dp-due.late, .late { color: var(--debit, #E5484D); font-weight: 600; }
.dp-due.soon, .soon { color: #B08800; font-weight: 600; }
.dp-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--mono, ui-monospace, monospace); }
.btn.wa { background: #25D366; border-color: #1EB954; color: #fff; }
.btn.wa:hover { background: #1EB954; }

/* dashboard */
.dp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-bottom: 18px; }
.dp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink); min-width: 0; }
.dp-kpi:hover { text-decoration: none; border-color: var(--accent); }
.dp-kpi span { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.dp-kpi b { font-size: 26px; font-weight: 780; letter-spacing: -.02em; }
.dp-kpi b.money { font-size: 20px; font-family: var(--mono, ui-monospace, monospace); }
.dp-kpi small { font-size: 12px; color: var(--muted); }
.dp-kpi.ok b { color: var(--credit, #1D9B5A); } .dp-kpi.warn b { color: #B08800; } .dp-kpi.bad b { color: var(--debit, #E5484D); }
.dp-dash .card h3, .dp-auth h3, .dp-client h3 { display: flex; align-items: center; gap: 8px; }
.dp-stagebar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--surface-2); margin: 6px 0 12px; }
.dp-stagebar i { display: block; min-width: 4px; }
.dp-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.dp-stage { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 6px 8px; border-radius: 9px; color: var(--ink); }
.dp-stage:hover { background: var(--surface-2); text-decoration: none; }
.dp-stage i { width: 10px; height: 10px; border-radius: 3px; }
.dp-stage small { color: var(--muted); width: 34px; text-align: right; }
.st-new { background: #6B7894; } .st-waiting_client { background: #E86A2C; } .st-in_progress { background: #2F6FED; } .st-waiting_authority { background: #0B7285; }
.st-completed { background: #1D9B5A; } .st-rejected { background: #E5484D; } .st-on_hold { background: #ADB5BD; } .st-cancelled { background: #495057; }
.dp-status-list { display: flex; flex-direction: column; gap: 4px; }
.dp-status-list a { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 8px; font-size: 13px; }
.dp-status-list a:hover { background: var(--surface-2); text-decoration: none; }
.dp-h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.dp-h4.late { color: var(--debit, #E5484D); }
.dp-plist, .dp-agenda { display: flex; flex-direction: column; }
.dp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.dp-row:last-child { border-bottom: 0; }
.dp-row:hover { background: var(--surface-2); text-decoration: none; }
.dp-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.dp-row small { color: var(--muted); font-size: 12.5px; }
.dp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.dp-ag { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.dp-ag:last-child { border-bottom: 0; }
.dp-ag:hover { background: var(--surface-2); text-decoration: none; }
.dp-ag.done { opacity: .6; }
.dp-ag-date { display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--muted); text-transform: uppercase; line-height: 1.1; border-radius: 10px; background: var(--surface-2); padding: 5px 0; }
.dp-ag-date b { font-size: 17px; color: var(--ink); }
.dp-ag.late .dp-ag-date { background: color-mix(in srgb, #E5484D 12%, transparent); }
.dp-ag-main { display: flex; flex-direction: column; min-width: 0; }
.dp-ag-main b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-ag-main small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tables */
.dp-table td { vertical-align: top; }
.dp-table .num { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; }

/* project page */
.dp-progress { display: flex; align-items: center; gap: 12px; margin: -6px 0 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.dp-prog-bar { flex: 1; min-width: 160px; max-width: 420px; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.dp-prog-bar i { display: block; height: 100%; background: var(--credit, #1D9B5A); border-radius: 99px; }
.dp-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; }
.dp-kv span { color: var(--muted); }
.dp-kv b { font-weight: 600; overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; margin: 0 0 8px; }
.dp-auth h4 { margin: 14px 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dp-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dp-case { --sc: #6B7894; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sc); color: var(--ink); }
.dp-case:hover { text-decoration: none; box-shadow: var(--shadow-1); border-color: var(--line-strong); border-left-color: var(--sc); }
.dp-case-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dp-case small { color: var(--muted); font-size: 12.5px; }
.dp-case-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 12.5px; }
.dp-siblings { display: flex; gap: 6px; overflow-x: auto; margin: -6px 0 14px; scrollbar-width: thin; }
.dp-siblings a { --sc: #6B7894; flex: none; font-size: 12.5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); white-space: nowrap; border-left: 3px solid var(--sc); }
.dp-siblings a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dp-client-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; margin-bottom: 16px; }

/* status picker */
.dp-status-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.dp-sp { --sc: #6B7894; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.dp-sp:has(input:checked) { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 10%, transparent); }
.dp-sp input { accent-color: var(--sc); grid-row: span 2; }
.dp-sp span { font-weight: 650; font-size: 13.5px; }
.dp-sp small { color: var(--muted); font-size: 11.5px; }

/* client card in the editor */
.dp-cc { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-top: -4px; }
.dp-cc > div { flex: 1; min-width: 0; font-size: 13.5px; }
.dp-client-card:empty { display: none; }
fieldset.group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0; }
fieldset.group legend { font-size: 13px; font-weight: 650; color: var(--muted); padding: 0 6px; }

/* documents */
.dp-doc-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dp-doc-title b { font-size: 14px; overflow-wrap: anywhere; }
.dp-vs { flex: none; font-size: 11px; font-weight: 750; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.dp-vs.verified { background: color-mix(in srgb, #1D9B5A 15%, transparent); color: #146C3E; }
.dp-vs.pending { background: color-mix(in srgb, #F5A524 18%, transparent); color: #8A5A00; }
.dp-vs.rejected, .dp-vs.expired { background: color-mix(in srgb, #E5484D 14%, transparent); color: #B42318; }
.dp-docs .att-tile figcaption { display: none; }

/* deadlines */
.dp-dl { display: grid; grid-template-columns: 28px 1fr auto 38px; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.dp-dl.late { background: color-mix(in srgb, #E5484D 5%, transparent); }
.dp-dl.done { opacity: .6; } .dp-dl.done b { text-decoration: line-through; }
.dp-dl-main { min-width: 0; } .dp-dl-main .muted { font-size: 12.5px; }
.dp-dl-ic { color: var(--muted); display: grid; place-items: center; }
.dp-check { width: 20px; height: 20px; accent-color: var(--credit, #1D9B5A); }
.dp-dl-when { text-align: right; }

/* communications */
.dp-comm-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dp-wa-note { font-size: 12.5px; margin: 8px 0 14px; }
.dp-voice { margin-bottom: 16px; } .dp-voice h4 { margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.dp-voice .rec-card { margin-bottom: 8px; }
.dp-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.dp-timeline::before { content: ''; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.dp-tl { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 8px 0; position: relative; }
.dp-tl-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--ink-2); z-index: 1; }
.dp-tl-ic.whatsapp { border-color: #25D366; color: #1EB954; }
.dp-tl-ic.call { border-color: #2F6FED; color: #2F6FED; }
.dp-tl-body { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; min-width: 0; }
.dp-tl.incoming .dp-tl-body { border-left: 3px solid #2F6FED; }
.dp-tl.outgoing .dp-tl-body { border-left: 3px solid #25D366; }
.dp-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-tl-head .muted { font-size: 12.5px; }
.dp-tl-head .icon-btn { width: 30px; height: 30px; }
.dp-tl-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dp-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dp-file { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-tl .ap-list { margin-top: 8px; }

/* money */
.dp-money-tiles { margin: 0 0 14px; }
.ach-tile.bad b { color: var(--debit, #E5484D); }
.dp-ps { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.dp-ps.paid { color: #146C3E; background: color-mix(in srgb, #1D9B5A 14%, transparent); }
.dp-ps.pending, .dp-ps.partially_paid { color: #8A5A00; background: color-mix(in srgb, #F5A524 16%, transparent); }
.dp-ps.cancelled, .dp-ps.waived { color: var(--muted); text-decoration: line-through; }
.dp-money .desc { min-width: 200px; }

/* history */
.dp-history { list-style: none; margin: 0; padding: 0; }
.dp-history li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.dp-history li:last-child { border-bottom: 0; }
.dp-h-dot { --sc: #6B7894; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); margin-top: 6px; }
.dp-h-note { font-size: 13.5px; margin-top: 4px; }

/* calendar */
.dp-cell .ach-sc { font-size: 11px; }
.dp-cell.dp-has { background: color-mix(in srgb, #2F6FED 9%, var(--surface)); }
.dp-cell.dp-over { background: color-mix(in srgb, #E5484D 11%, var(--surface)); }
.dp-cell.dp-done { background: color-mix(in srgb, #1D9B5A 8%, var(--surface)); }
.dp-cell.sel { background: var(--accent) !important; color: #fff; }
.dp-dots { display: flex; gap: 2px; margin-top: 2px; }
.dp-dots i, .dp-l { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: #2F6FED; }
.dp-dots i.case, .dp-l.case { background: #7C4DFF; } .dp-dots i.project, .dp-l.project { background: #0E7C73; }
.dp-dots i.late, .dp-l.late { background: #E5484D; } .dp-dots i.done, .dp-l.done { background: #1D9B5A; }
.dp-l { width: 10px; height: 10px; }
.dp-cal-layout { grid-template-columns: minmax(330px, 460px) minmax(0, 1fr); }

/* authorities */
.dp-auth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dp-auth-card { color: var(--ink); display: block; }
.dp-auth-card:hover { text-decoration: none; border-color: var(--accent); }
.dp-auth-card h3 { margin: 0 0 2px; display: flex; gap: 8px; align-items: center; font-size: 16px; }
.dp-auth-card .dp-kv { margin-top: 10px; }
.dp-auth-card.archived { opacity: .6; }

/* reports */
.dp-rep-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dp-rep { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.dp-rep:hover { text-decoration: none; border-color: var(--accent); }
.dp-rep.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.dp-rep-filters { margin-bottom: 16px; }
.dp-rep-filters .filters { align-items: flex-end; flex-wrap: wrap; }

/* settings */
.dp-st-list, .dp-opt-list { display: flex; flex-direction: column; gap: 6px; }
.dp-st-row { display: grid; grid-template-columns: auto 38px minmax(0, 1fr) 160px 36px; gap: 6px; align-items: center; }
.dp-st-row small { grid-column: 3 / -1; margin-top: -4px; font-size: 11.5px; }
.dp-st-row small:empty { display: none; }
.dp-st-row input[type=color] { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--surface); }
.dp-st-row.archived, .dp-opt.archived { opacity: .55; }
.dp-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 6px; align-items: center; }
.dp-opt:not(:has(select)) { grid-template-columns: minmax(0, 1fr) 36px; }
.dp-add-row { display: flex; gap: 6px; margin-top: 10px; }
.dp-add-row .input { flex: 1; min-width: 0; }

@media (max-width: 1100px) {
  .dp-cal-layout { grid-template-columns: 1fr; }
  .dp-client-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-kpi b { font-size: 22px; } .dp-kpi b.money { font-size: 16px; }
  .dp-status-pick { grid-template-columns: 1fr; }
  .dp-dl { grid-template-columns: 26px 1fr 34px; }
  .dp-dl-when { grid-column: 2; text-align: left; grid-row: 2; }
  .dp-ag { grid-template-columns: 42px 1fr; }
  .dp-ag > .dp-due { grid-column: 2; }
  .dp-st-row { grid-template-columns: auto 36px minmax(0, 1fr) 36px; }
  .dp-st-row select { grid-column: 2 / -1; }
  .dp-toolbar > select, .dp-filters > select { flex: 1 1 140px; }
  .dp-comm-bar .btn { flex: 1 1 auto; justify-content: center; }
  .dp-cases { grid-template-columns: 1fr; }
  .dp-nav a { padding: 10px 10px; }
}