/* Shared building blocks of the new screens (same language as Contas a pagar, Lançamentos
   and Fluxo de caixa). Older screens are moved to these classes one by one. */

/* Section navigation (Orçamento › Compromissos, Parcelamentos…) and filters */
.ui-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.ui-tabs>a,.ui-tabs>button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 13px;border-radius:20px;border:0;background:#f0f4fa;color:#456287;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap}
.ui-tabs>a:hover{background:#e6effc;color:#234f8c}
.ui-tabs>a.active{background:var(--blue);color:#fff}
.ui-tabs>a .ui-count{font-weight:500;opacity:.8}
.ui-subnav{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.ui-subnav>a{background:#fff;border:1px solid var(--line);border-radius:8px}
.ui-subnav>a.active{border-color:var(--blue)}

/* Heading actions: month picker and primary action next to the title */
.ui-head-actions{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
.ui-month{display:flex;align-items:center;gap:8px}
.ui-month label{font-size:12px;font-weight:600;color:#38557d}
.ui-month .form-control{width:160px;min-height:42px;font-size:13px}
.ui-month .btn{min-height:42px}

/* Indicators: cards with icon, value and short explanation (reuses .home-action) */
.ui-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.ui-metrics-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-metrics-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui-metrics-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ui-metric{min-height:96px;background:#f8fbff;border-color:#dfeafa}
.ui-metric b{font-size:clamp(17px,1.5vw,22px)}
.ui-metric small{white-space:normal}
.ui-metric.ui-tone-ok{background:#f4fbf7;border-color:#ddefe5}.ui-metric.ui-tone-ok .home-action-icon{background:#e3f5eb;color:#23805e}
.ui-metric.home-action-warn{background:#fffbf3;border-color:#f4ead6}
.ui-metric.home-action-danger{background:#fff8f8;border-color:#f7dddd}
.ui-metric.ui-tone-violet{background:#faf8ff;border-color:#e9e2fa}.ui-metric.ui-tone-violet .home-action-icon{background:#efe9fd;color:#6a4fb0}
div.ui-metric:hover{background:inherit}

/* Panels: a card with a header (title, explanation, actions) and a body */
.ui-panel{margin-bottom:16px;overflow:visible}
.ui-panel-head{display:flex;justify-content:space-between;align-items:start;gap:14px;padding:16px 18px 12px}
.ui-panel-head h2{font-size:16px;font-weight:700;margin:0}
.ui-panel-head p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.ui-panel-head .btn{min-height:36px;white-space:nowrap}
.ui-panel-body{padding:0 18px 16px}
.ui-panel-body>p:last-child{margin-bottom:0}
.ui-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line)}
.ui-toolbar .ui-tabs{margin:0}
.ui-toolbar small{color:var(--muted);font-size:11px}
details.ui-panel>summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:650;font-size:14px;color:var(--ink);display:flex;justify-content:space-between;gap:10px}
details.ui-panel>summary::-webkit-details-marker{display:none}
details.ui-panel>summary:after{content:"›";transform:rotate(90deg);color:#5a83b8;font-size:18px;line-height:1}
details.ui-panel[open]>summary:after{transform:rotate(-90deg)}
details.ui-panel>summary small{font-weight:500;color:var(--muted);font-size:12px;margin-left:auto}

/* Tables */
.ui-table-wrap{overflow-x:auto}
.ui-table{width:100%;border-collapse:collapse;font-size:12px}
.ui-table th{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#5d7393;background:#f6f9fe;padding:10px 12px;white-space:nowrap;text-align:left;border-bottom:1px solid var(--line)}
.ui-table td{padding:11px 12px;border-bottom:1px solid #edf1f7;vertical-align:middle;color:#2a4063}
.ui-table tbody tr:hover td{background:#fafcff}
.ui-table tbody tr:last-child td{border-bottom:0}
.ui-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-table td strong{display:block;font-size:13px;color:var(--ink);font-weight:600}
.ui-table td small{display:block;font-size:11px;color:var(--muted)}
.ui-table tfoot td,.ui-table tr.ui-total td,.ui-table tr.ui-total th{background:#eef5ff;font-weight:700;color:#21508f}
.ui-table th[scope=row]{background:transparent;text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink)}
.ui-table-empty td{text-align:center;color:var(--muted);padding:26px 12px}
.ui-sort{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ui-sort a{text-decoration:none;font-weight:600;padding:4px 9px;border-radius:14px}
.ui-sort a.active{background:#e6effc;color:#234f8c}

/* Status badges */
.ui-badge{display:inline-flex;align-items:center;border-radius:20px;padding:4px 9px;font-size:11px;font-weight:650;white-space:nowrap;background:#edf4ff;color:#2364b5}
.ui-badge-ok{background:#e5f5eb;color:#217451}.ui-badge-warn{background:#fff0d9;color:#a1600a}.ui-badge-danger{background:#ffe9e7;color:#b12d29}
.ui-badge-violet{background:#f0eafd;color:#7150a4}.ui-badge-muted{background:#eef1f5;color:#64738a}

/* Row actions: one visible action plus a "⋯" menu */
.ui-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.ui-actions .btn{min-height:32px;font-size:11px;white-space:nowrap}
.ui-more{position:relative}
.ui-more>summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:7px;color:#5377a6;font-size:20px;line-height:1}
.ui-more>summary::-webkit-details-marker{display:none}
.ui-more>summary:hover{background:#eef4fc}
.ui-more-menu{position:absolute;right:0;top:34px;z-index:20;min-width:180px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 20px #17386725;display:grid;gap:2px}
.ui-more-menu a,.ui-more-menu button{display:block;width:100%;text-align:left;padding:7px 9px;font-size:12px;text-decoration:none;border:0;background:none;border-radius:6px;color:#286bc6}
.ui-more-menu a:hover,.ui-more-menu button:hover{background:#f2f7fe}
.ui-more-menu .ui-danger{color:#b12d29}
.ui-more-menu form{margin:0}

/* Empty states and notes */
.ui-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 18px;color:var(--muted);font-size:13px}
.ui-empty .home-action-icon{margin-bottom:4px}
.ui-empty strong{color:var(--ink);font-size:14px}
.ui-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:#f0f5fc;border:1px solid #e1eaf7;color:#4f6a8f;font-size:12px;margin-bottom:16px}
.ui-note .icon{width:16px;height:16px;margin-top:2px;flex:none}
.ui-note strong{color:#23436f}
.ui-note p{margin:2px 0 0}

/* Forms: labelled fields on a grid, help text under the field */
.ui-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px 16px}
.ui-field{grid-column:span 6;display:flex;flex-direction:column;gap:5px;min-width:0}
.ui-field.ui-w3{grid-column:span 3}.ui-field.ui-w4{grid-column:span 4}.ui-field.ui-w8{grid-column:span 8}.ui-field.ui-w12{grid-column:1/-1}
.ui-field>label,.ui-field>.ui-label{font-size:12px;font-weight:600;color:#2a4063;margin:0}
.ui-field small{font-size:11px;color:var(--muted);line-height:1.45}
.ui-field .form-control,.ui-field .form-select{min-height:42px;font-size:14px}
.ui-form-section{margin:0;grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#6d7f97;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.ui-form-section:first-child{border-top:0;padding-top:0;margin-top:0}
.ui-check{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:13px}
.ui-form-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:6px}

@media(max-width:1199.98px){.ui-metrics-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767.98px){
  .ui-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ui-metric{min-height:0;padding:12px;flex-direction:column;align-items:flex-start;gap:6px}
  .ui-metric>.icon{display:none}
  .ui-head-actions{width:100%}.ui-month{flex:1}.ui-month .form-control{flex:1;width:auto}
  .ui-subnav,.ui-toolbar .ui-tabs{flex-wrap:nowrap;overflow-x:auto;width:100%}
  .ui-panel-head{flex-direction:column;padding:14px}
  .ui-panel-body{padding:0 14px 14px}
  .ui-table.ui-stack thead{display:none}
  .ui-table.ui-stack,.ui-table.ui-stack tbody,.ui-table.ui-stack tr,.ui-table.ui-stack td{display:block;width:100%}
  .ui-table.ui-stack tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  .ui-table.ui-stack td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  .ui-table.ui-stack td[data-label]:before{content:attr(data-label);color:var(--muted);font-size:11px;text-align:left;flex:none}.ui-table.ui-stack td[data-label]>small{display:inline;margin-left:4px}.ui-table.ui-stack td[data-label]>small:before{content:'· '}.ui-table.ui-stack td[data-label]{align-items:baseline}
  .ui-table.ui-stack td:first-child{display:block;text-align:left;padding-bottom:6px}
  .ui-table.ui-stack td.ui-actions-cell{display:block;padding-top:8px}.ui-table.ui-stack td.ui-actions-cell .ui-actions{justify-content:flex-start}
  .ui-table.ui-stack .ui-table-empty td{text-align:center;display:block}
  .ui-field,.ui-field.ui-w3,.ui-field.ui-w4,.ui-field.ui-w8{grid-column:1/-1}
  .ui-field.ui-half-mobile{grid-column:span 6}
}

/* Collapsible month rows (projection) */
.ui-month-detail{border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:#fff}
.ui-month-detail>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:13px}
.ui-month-detail>summary::-webkit-details-marker{display:none}
.ui-month-detail>summary span{font-weight:650;color:var(--ink);min-width:70px}
.ui-month-detail>summary small{color:var(--muted);font-size:11px}
.ui-month-detail>summary strong{margin-left:auto;font-variant-numeric:tabular-nums}
.ui-month-detail>summary:after{content:"›";transform:rotate(90deg);color:#5a83b8;font-size:17px;line-height:1}
.ui-month-detail[open]>summary:after{transform:rotate(-90deg)}
.ui-month-detail ul{list-style:none;margin:0;padding:4px 14px 10px;border-top:1px solid #edf1f7}
.ui-month-detail li{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:12px;border-bottom:1px dashed #edf1f7}
.ui-month-detail li:last-child{border-bottom:0}
.ui-month-detail li small{color:var(--muted);font-size:11px}
.ui-month-detail li strong{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.ui-history th small{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:#8193ab}
.ui-history th[scope=row]{position:sticky;left:0;background:#fff;min-width:170px;z-index:1}
.ui-history td small{font-size:10px}
.ui-history td.ui-over strong{color:#b12d29}

/* Progress bar without inline styles (CSP): width in steps of 10% */
.ui-progress{display:block;height:7px;background:#e3e9f2;border-radius:99px;overflow:hidden;min-width:90px}.ui-progress>span{display:block;height:100%;background:#23a975;border-radius:99px;width:0}
.ui-progress-0{width:0%!important}.ui-progress-10{width:10%!important}.ui-progress-20{width:20%!important}.ui-progress-30{width:30%!important}.ui-progress-40{width:40%!important}.ui-progress-50{width:50%!important}.ui-progress-60{width:60%!important}.ui-progress-70{width:70%!important}.ui-progress-80{width:80%!important}.ui-progress-90{width:90%!important}.ui-progress-100{width:100%!important}

/* Work queue (pendências) */
.ui-queue{display:grid}
.ui-queue-item{display:grid;grid-template-columns:110px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 18px;border-top:1px solid #edf1f7}
.ui-queue-item:first-child{border-top:0}
.ui-queue-item .ui-badge{justify-self:start;white-space:normal}
.ui-queue-main{min-width:0}.ui-queue-main strong{display:block;font-size:13px;overflow-wrap:anywhere}.ui-queue-main p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.ui-queue-meta{text-align:right;white-space:nowrap}.ui-queue-meta strong{display:block;font-size:13px;font-variant-numeric:tabular-nums}.ui-queue-meta small{font-size:11px;color:var(--muted)}
.ui-queue-item .btn{min-height:32px}
.ui-pager{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
/* Panel with its own padding (older sections moved into panels) */
.ui-panel-pad{padding:18px}.ui-panel-pad>h2{font-size:16px;font-weight:700;margin-bottom:6px}.ui-panel-pad>p{font-size:12px;color:var(--muted)}
.ui-item{border-top:1px solid #edf1f7;padding:12px 0;font-size:13px}.ui-item p{margin-bottom:6px}.ui-item form{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}.ui-item .btn{min-height:32px}
@media(max-width:767.98px){.ui-queue-item{grid-template-columns:1fr auto;padding:12px 14px;gap:6px 10px}.ui-queue-item .ui-badge{grid-column:1/-1}.ui-queue-main{grid-column:1/-1}.ui-queue-meta{text-align:left}.ui-queue-item .btn{justify-self:end}.ui-panel-pad{padding:14px}}
.ui-panel-body-top{padding-top:18px}

/* Entry detail */
.entry-summary{display:flex;flex-direction:row;justify-content:space-between;gap:18px;align-items:center;padding:18px 20px;margin-bottom:16px}
.entry-summary-main{min-width:0}.entry-summary-main .eyebrow{margin:0}.entry-summary-main h2{font-size:20px;font-weight:700;margin:4px 0 4px;overflow-wrap:anywhere}.entry-summary-main p{margin:0;font-size:12px;color:var(--muted)}
.entry-summary-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}.entry-summary-side strong{font-size:22px;font-variant-numeric:tabular-nums}.entry-summary-side small{font-size:11px;color:var(--muted)}
.entry-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:16px;align-items:start}
.entry-main,.entry-aside{min-width:0}
.entry-form h2{margin-bottom:14px}
.entry-aside .ui-panel-pad>h2{font-size:14px}
.entry-aside .ui-item{margin:0;font-size:12px}
.entry-warnings{padding-left:18px;margin:0;font-size:12px;color:#40597d}
.entry-raw{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:4px 14px;font-size:12px}.entry-raw dt{color:var(--muted);font-weight:600}.entry-raw dd{margin:0;overflow-wrap:anywhere}
@media(max-width:991.98px){.entry-layout{grid-template-columns:1fr}}
@media(max-width:767.98px){.entry-summary{flex-direction:column;align-items:flex-start}.entry-summary-side{align-items:flex-start}.entry-raw{grid-template-columns:1fr}}

/* Categories and rules */
.ui-inline-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}.ui-inline-form .ui-field{flex:1 1 260px}
.ui-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ui-chips li{padding:6px 11px;border-radius:20px;background:#f2f6fc;border:1px solid #e3ebf6;font-size:12px;color:#2a4063}
.ui-chips .ui-chips-empty{background:none;border:0;color:var(--muted)}
.ui-field.ui-w2{grid-column:span 2}
.ui-search-form{display:flex;gap:8px;flex:1 1 320px;max-width:520px}.ui-search-form .form-control{min-height:38px;font-size:13px}.ui-search-form .btn{min-height:38px}
.ui-bulk{margin:0}
.ui-th-sort{color:inherit;text-decoration:none}.ui-th-sort.active{color:#1f5fb8}
.ui-rules td:first-child,.ui-rules th:first-child{width:36px}
@media(max-width:767.98px){.ui-field.ui-w2{grid-column:span 6}.ui-table.ui-stack td.ui-select-cell{display:block;padding:0}}
.wa-qr-img{max-width:320px;width:100%}
.ui-rules .ui-table-empty td{width:auto}
.platform-delete-form{min-width:260px;padding:10px;gap:6px}.platform-delete-form small{color:var(--muted);font-size:11px;line-height:1.4}.platform-delete-form .ui-danger{font-weight:600}

/* Spreadsheet migration */
.sheet-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:16px;align-items:start}
.sheet-steps{padding-left:18px;font-size:12px;color:#40597d;display:grid;gap:8px}
.sheet-tab>summary span{font-weight:700}
.sheet-sample th{text-transform:none;letter-spacing:0;font-size:11px}
.sheet-sample td{font-size:11px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.sheet-cats{padding-top:14px;display:grid;gap:6px}
.sheet-problems{font-size:12px;color:#7a5a12}.sheet-problems ul{margin:6px 0 0;padding-left:18px}
.sheet-final{justify-content:flex-end;padding-top:12px}
.sheet-final form{margin:0}
@media(max-width:991.98px){.sheet-layout{grid-template-columns:1fr}}