@property --hold-progress { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.water-task-row { cursor: pointer; }
.water-task-row:hover > * { background: #f1f7f2; }
.water-bill-details { align-items: flex-start; }
.water-bill-summary { display: flex; gap: .5rem 1.25rem; flex-basis: 100%; flex-wrap: wrap; }
.water-bill-code { flex-basis: 100%; overflow-wrap: anywhere; }
.water-bill-pix { display: flex; align-items: flex-start; gap: 1.25rem; flex-basis: 100%; flex-wrap: wrap; }
.water-bill-pix canvas { display: block; margin-top: .35rem; border: 1px solid #dfe4df; border-radius: .4rem; }
.water-bill-pix-copy { min-width: min(420px, 100%); overflow-wrap: anywhere; }
.copy-value-wrap { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; vertical-align: middle; }
.copy-value { max-width: 100%; border: 0; border-radius: .4rem; background: #eef0ff; padding: .2rem .38rem; color: #3537a0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.copy-value:hover, .copy-value:focus-visible, .copy-value.is-copied { background: #dedfff; outline: 0; }
.copy-value code { color: inherit; font-size: inherit; white-space: normal; }
.copy-feedback { color: #4d4fbe; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; } .auth-card { width: min(440px, 100%); border-radius: 1rem; }
.agent-panel { max-width: 760px; } .agent-result { border-radius: .6rem; background: #eef4ff; color: #173d6b; padding: .85rem 1rem; white-space: pre-wrap; }
:root { background: #f4f6f3; } body { min-width: 680px; background: #f4f6f3; color: #1e2a20; } h1 { letter-spacing: -.04em; } .task-grid { font-size: .94rem; } .task-grid thead th { background: #183d28; color: #fff; border: 0; white-space: nowrap; } .task-grid tbody tr:not(.group-row) th, .task-grid td { border-color: #e5eae5; } .task-name { min-width: 420px; font-weight: 500; } .task-name-layout { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .task-menu-button { color: #6c757d; line-height: 1; letter-spacing: .08em; } .task-menu-button:hover { background: #e9ecef; } .month-cell { min-width: 78px; text-align: center; } .group-row th { background: #e5f0e5; color: #245435; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; } .task-row.is-inactive > * { background: #eef0ee !important; color: #7a817b; } .task-row.is-inactive .task-check { filter: grayscale(.6); opacity: .75; } .skip-mark { color: #919891; font-size: 1.2rem; font-weight: 600; } .task-options-row td { background: #f5f6f5; padding: 0 1rem 1rem; } .task-options-panel { max-width: 940px; border: 1px solid #dfe4df; border-radius: .75rem; background: white; padding: 1rem; box-shadow: 0 .35rem 1rem rgba(20, 45, 28, .07); } .task-option-section { border-top: 1px solid #edf0ed; padding-top: .9rem; } .skip-months { display: flex; flex-wrap: wrap; gap: .5rem; } .skip-month-option { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid #dee3de; border-radius: 999px; cursor: pointer; text-transform: capitalize; background: #fafbfa; } .skip-month-option:has(input:checked) { border-color: #6c757d; background: #e9ecef; } .hold-control { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; } .hold-control.holding { background: conic-gradient(#198754 var(--hold-progress), #d8e5da var(--hold-progress)); animation: hold-progress 1s linear forwards; } .hold-control.saving { background: #d8e5da; } .task-check { width: 1.25rem; height: 1.25rem; cursor: pointer; touch-action: none; } .task-check:checked { background-color: #198754; border-color: #198754; } @keyframes hold-progress { to { --hold-progress: 360deg; } } .water-bill-row td { background: #f7fbff; padding: .75rem 1rem .9rem 1.5rem; } .water-bill-panel { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .water-bill-details { display: flex; gap: .5rem 1.25rem; flex: 1; flex-wrap: wrap; align-items: center; } .water-bill-details .barcode { flex-basis: 100%; overflow-wrap: anywhere; } .water-bill-details code { color: #173d6b; font-size: .9rem; } .water-settings { width: min(780px, 100%); } .water-settings .form-label { margin-bottom: .2rem; font-size: .78rem; color: #59636e; } #new-task { max-width: 920px; margin: 0 !important; } .add-task-row td { background: #f8faf8; padding: 0; border-top: 1px solid #dce6dd; } .add-task-toggle { display: block; width: 100%; border: 0; background: transparent; color: #39734b; font-size: .9rem; font-weight: 600; text-align: left; padding: .85rem 1.25rem; cursor: pointer; } .add-task-toggle:hover, .add-task-toggle:focus-visible { background: #edf5ee; color: #245435; } .add-task-panel { background: #f4f7f4; border-top: 1px solid #e3ebe3; padding: 1rem 1.25rem 1.25rem; } .new-task-form { max-width: 920px; }
@media (max-width: 700px) { body { min-width: 0; } .container-fluid { min-width: 680px; } }

.task-row-clickable, .water-task-row { cursor: pointer; }
.task-row-clickable:hover > *, .water-task-row:hover > * { background-color: #f0f7f1 !important; }
.task-row-clickable:focus-visible, .water-task-row:focus-visible { outline: 2px solid #198754; outline-offset: -2px; }
.operation-log-list { display: grid; gap: .45rem; margin-top: .6rem; max-height: 260px; overflow: auto; }
.operation-log-item { border: 1px solid #edf0ed; border-radius: .5rem; padding: .45rem .6rem; background: #fbfcfb; }
.operation-log-item.status-error { border-color: #f2cccc; background: #fff8f8; }
.operation-log-item.status-needs_review, .operation-log-item.status-needs_config { border-color: #f0dfb7; background: #fffaf0; }
.task-id-cell { width: 4.5rem; min-width: 4.5rem; text-align: center; }
.task-date-cell { width: 9rem; min-width: 9rem; text-align: center; }
.task-day-editor { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.task-day-editor input { width: 4.6rem; min-width: 4.6rem; text-align: center; }
.task-date-hint { white-space: nowrap; font-size: .72rem; color: #66736a; }
.salary-email-section { margin-top: 1rem; }
.salary-email-section textarea { min-height: 8rem; font-family: inherit; }
.email-bill-row td { background: #f7fbff; padding: .75rem 1rem .9rem 1.5rem; }
.field-locked { background-color: #eef1ee !important; color: #6e766f; cursor: not-allowed; }
.salary-email-section [data-email-status] { min-height: 1.25rem; }
.grid-layout { display: block; }
.task-side-panel { min-width: 0; align-self: start; border: 1px solid #dfe7df; border-radius: .75rem; background: #f7fbf7; padding: 1rem; box-shadow: 0 .35rem 1rem rgba(20, 45, 28, .07); }
.task-side-panel > .task-options-panel { max-width: none; border: 0; box-shadow: none; padding: 0; background: transparent; }
.task-side-panel > .water-bill-panel, .task-side-panel > .water-bill-details { min-width: 0; }
.task-side-panel > .water-bill-details { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.grid-layout.show-all-months { display: block; }
.grid-layout.show-all-months .task-options-panel { max-width: none; }
@media (min-width: 992px) {
  .grid-layout:not(.show-all-months) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
  .grid-layout:not(.show-all-months) #grid-card { min-width: 0; }
  .grid-layout:not(.show-all-months) .task-side-panel { min-height: 12rem; }
  .grid-layout:not(.show-all-months) .task-grid { width: 100%; table-layout: fixed; }
  .grid-layout:not(.show-all-months) .task-id-cell { width: 3.25rem; min-width: 3.25rem; }
  .grid-layout:not(.show-all-months) .task-name { width: 30%; min-width: 0; overflow-wrap: anywhere; }
  .grid-layout:not(.show-all-months) .task-name-layout { min-width: 0; justify-content: flex-start; }
  .grid-layout:not(.show-all-months) .task-date-cell { width: 6rem; min-width: 6rem; }
  .grid-layout:not(.show-all-months) .month-cell { width: 4rem; min-width: 4rem; }
  .grid-layout:not(.show-all-months) .task-grid thead .task-date-cell { white-space: normal; font-size: .74rem; line-height: 1.1; }
}

/* Visão "Agora": menos planilha, mais decisão do que fazer no mês. */
.app-header { min-height: 4.75rem; }
.view-switch .btn { min-width: 5.8rem; }
.month-summary { display: grid; grid-template-columns: minmax(10rem, 1.35fr) repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.month-summary-card { min-width: 0; min-height: 7.2rem; border: 1px solid #dce6dd; border-radius: .95rem; background: #fff; padding: 1rem 1.1rem; box-shadow: 0 .25rem .8rem rgba(20, 45, 28, .05); }
.month-summary-card.summary-month { background: linear-gradient(135deg, #163e2a, #286642); border-color: #163e2a; color: #fff; }
.month-summary-label { margin: 0 0 .35rem; color: #718077; font-size: .72rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.summary-month .month-summary-label, .summary-month .month-summary-note { color: rgba(255, 255, 255, .76); }
.month-summary-value { display: block; color: #1e2a20; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.03em; }
.summary-month .month-summary-value { color: #fff; }
.month-summary-note { margin: .4rem 0 0; color: #6e7b72; font-size: .8rem; }
.task-copy { min-width: 0; }
.task-meta { margin-top: .24rem; color: #6a756d; font-size: .74rem; font-weight: 400; }
.task-status-cell { width: 9.6rem; min-width: 9.6rem; text-align: center; }
.due-day-editor input { width: 5rem; }
.task-status { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; border-radius: 999px; padding: .32rem .6rem; font-size: .74rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.status-ready { background: #dff1e4; color: #176038; }
.status-pending { background: #edf0ee; color: #5f6b62; }
.status-waiting { background: #fff2d6; color: #825e1a; }
.status-complete { background: #dcecdf; color: #24593a; }
.status-muted { background: #e7e9e7; color: #737a74; }
.agent-panel { position: fixed; z-index: 1050; top: 5.5rem; right: 2rem; width: min(31rem, calc(100vw - 2rem)); max-width: none; border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgba(17, 45, 29, .18) !important; }
.agent-panel .card-body { padding: 1.25rem; }
.agent-panel #agent-actions .btn { text-align: left; }
.task-side-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.grid-layout.show-all-months .task-options-row td { padding: 1rem; }
.grid-layout.show-all-months .task-options-panel { width: min(100%, 66rem); max-width: 66rem; margin: 0; }
@media (min-width: 992px) {
  .grid-layout:not(.show-all-months) { display: block; }
  .grid-layout.has-side-panel:not(.show-all-months) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(25rem, .85fr); gap: 1rem; align-items: start; }
  .grid-layout:not(.show-all-months) .task-name { width: auto; min-width: 0; }
  .grid-layout:not(.show-all-months) .task-status-cell { width: 9.6rem; min-width: 9.6rem; }
  .grid-layout:not(.show-all-months) .month-cell { width: 4.25rem; min-width: 4.25rem; }
  .grid-layout.has-side-panel:not(.show-all-months) .task-side-panel { min-height: 12rem; }
}
@media (max-width: 991px) {
  .month-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-panel { position: static; width: auto; margin-bottom: 1rem !important; }
  .task-side-panel { position: static; max-height: none; }
}

/* Paleta: grafite, cinza e índigo. Sem o verde predominante. */
:root { background: #f6f7fa; }
body { background: #f6f7fa; color: #232733; }
.text-success-emphasis { color: #5456c6 !important; }
.btn-primary { --bs-btn-bg: #5658d6; --bs-btn-border-color: #5658d6; --bs-btn-hover-bg: #4648ba; --bs-btn-hover-border-color: #4648ba; --bs-btn-active-bg: #3f41aa; --bs-btn-active-border-color: #3f41aa; }
.btn-outline-primary { --bs-btn-color: #4d4fbe; --bs-btn-border-color: #aeb0ef; --bs-btn-hover-bg: #5658d6; --bs-btn-hover-border-color: #5658d6; --bs-btn-active-bg: #4648ba; --bs-btn-active-border-color: #4648ba; }
.task-grid thead th { background: #252a35; }
.task-grid tbody tr:not(.group-row) th, .task-grid td { border-color: #e5e8ef; }
.group-row th { background: #eef0f7; color: #565a74; }
.water-task-row:hover > *, .task-row-clickable:hover > * { background: #f0f1ff !important; }
.task-row-clickable:focus-visible, .water-task-row:focus-visible { outline-color: #5658d6; }
.task-row.is-inactive > * { background: #f0f1f4 !important; color: #858b96; }
.task-options-row td { background: #f4f5f9; }
.task-options-panel { border-color: #e0e3eb; box-shadow: 0 .35rem 1rem rgba(35, 39, 51, .07); }
.task-option-section { border-top-color: #e9ebf1; }
.skip-month-option { border-color: #dde1ea; background: #fbfbfd; }
.skip-month-option:has(input:checked) { border-color: #9fa2e7; background: #edeeff; }
.hold-control.holding { background: conic-gradient(#5658d6 var(--hold-progress), #e0e1fa var(--hold-progress)); }
.hold-control.saving { background: #e0e1fa; }
.task-check:checked { background-color: #5658d6; border-color: #5658d6; }
.water-bill-pix canvas { border-color: #dfe2eb; }
.water-settings .form-label, .task-date-hint { color: #707789; }
.add-task-row td { background: #fafaff; border-top-color: #e1e4ec; }
.add-task-toggle { color: #4f51bf; }
.add-task-toggle:hover, .add-task-toggle:focus-visible { background: #eeeeff; color: #4042a8; }
.add-task-panel { background: #f5f6fb; border-top-color: #e2e5ed; }
.operation-log-item { border-color: #e7e9ef; background: #fcfcfe; }
.field-locked { background-color: #f0f1f4 !important; color: #7c8390; }
.task-side-panel { border-color: #e0e3eb; background: #fbfbfd; box-shadow: 0 .35rem 1rem rgba(35, 39, 51, .07); }
.month-summary-card { border-color: #e1e4ed; box-shadow: 0 .25rem .8rem rgba(35, 39, 51, .05); }
.month-summary-card.summary-month { background: linear-gradient(135deg, #252a35, #3b4252); border-color: #252a35; }
.month-summary-label { color: #747c8d; }
.month-summary-value { color: #242934; }
.month-summary-note, .task-meta { color: #727a8a; }
.status-ready { background: #e7e8ff; color: #4648b4; }
.status-pending { background: #eef0f4; color: #626a78; }
.status-waiting { background: #fff1d7; color: #8a6118; }
.status-complete { background: #e6e7ff; color: #4d4fb6; }
.status-muted { background: #eceef2; color: #757c87; }
.agent-panel { box-shadow: 0 1rem 2.5rem rgba(35, 39, 51, .18) !important; }

/* O painel de Agora fica sempre selecionado e vira a continuação da tabela. */
.skip-section { display: grid; gap: .45rem; }
.skip-toggle { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; cursor: pointer; font-weight: 700; }
.skip-toggle .form-check-input { flex: 0 0 auto; margin: 0; }
.skip-month-details { margin: .2rem 0 0 1.8rem; }
.skip-month-details[hidden] { display: none; }
@media (min-width: 992px) {
  .grid-layout.has-side-panel:not(.show-all-months) { gap: 0; }
  .grid-layout.has-side-panel:not(.show-all-months) #grid-card { border-radius: .95rem 0 0 .95rem; }
  .grid-layout.has-side-panel:not(.show-all-months) .task-side-panel { min-height: 16rem; margin-left: -1px; border-radius: 0 .95rem .95rem 0; box-shadow: 0 .35rem 1rem rgba(35, 39, 51, .07); }
}

/* Celular: a lista continua simples e o painel vira a leitura principal. */
@media (max-width: 767.98px) {
  body, .container-fluid { min-width: 0 !important; }
  #app-main { padding: 1rem .75rem !important; }
  .app-header { min-height: 0; margin-bottom: 1rem !important; }
  .app-header > div:first-child, .app-header > div:last-child { width: 100%; }
  .app-header h1 { font-size: 2.15rem; }
  .app-header > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; }
  .view-switch { grid-column: 1 / -1; width: 100%; }
  .view-switch .btn { flex: 1; min-width: 0; }
  #agent-toggle, #logout { width: 100%; }
  .month-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .75rem; }
  .month-summary-card { min-height: 5.9rem; padding: .8rem .85rem; border-radius: .75rem; }
  .month-summary-card.summary-month { grid-column: 1 / -1; min-height: 5.2rem; }
  .month-summary-value { font-size: 1.35rem; }
  .month-summary-note { font-size: .75rem; }
  .grid-layout:not(.show-all-months) #grid-card { width: 100%; border-radius: .85rem; }
  .grid-layout:not(.show-all-months) .task-grid { width: 100%; min-width: 0; table-layout: fixed; font-size: .87rem; }
  .grid-layout:not(.show-all-months) .task-id-cell { display: none; }
  .grid-layout:not(.show-all-months) .task-name { width: auto; min-width: 0; overflow-wrap: anywhere; }
  .grid-layout:not(.show-all-months) .task-name-layout { min-width: 0; justify-content: flex-start; }
  .grid-layout:not(.show-all-months) .task-status-cell { width: 6.75rem; min-width: 6.75rem; padding-left: .25rem; padding-right: .25rem; }
  .grid-layout:not(.show-all-months) .month-cell { width: 3.35rem; min-width: 3.35rem; padding-left: .2rem; padding-right: .2rem; }
  .grid-layout:not(.show-all-months) .task-status { padding: .28rem .38rem; font-size: .68rem; white-space: normal; }
    .task-meta { font-size: .72rem; line-height: 1.25; }
  .task-options-row td { padding: .75rem; }
  .task-options-row .task-options-panel { font-size: .92rem; }
  .mobile-inline-details td { padding: 0; background: #f3f4f8; border-top: 0; }
  .mobile-inline-details .task-options-panel { padding: .8rem 1rem .65rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .mobile-inline-details .task-options-panel > :first-child { display: none !important; }
  .mobile-inline-details .task-option-section:first-of-type { border-top: 0; padding-top: 0; }
  .mobile-inline-details .water-bill-panel,
  .mobile-inline-details .water-bill-details { padding: .35rem 1rem 1rem; background: transparent; }
  .mobile-inline-details .water-bill-summary { padding-top: .65rem; border-top: 1px solid #e1e4ec; }
  .mobile-inline-details .water-bill-pix canvas { width: 150px; height: 150px; }
  .operation-log-details > summary { cursor: pointer; font-weight: 700; }
  .operation-log-details[open] > summary { margin-bottom: .65rem; }
  .skip-month-details { margin-left: 0; }
  .skip-month-option { padding: .34rem .52rem; }
  .water-bill-pix, .water-bill-details { gap: .75rem; }
  .water-bill-pix-copy { min-width: 0; }
  .copy-value-wrap { display: flex; align-items: flex-start; margin-top: .25rem; }
  .copy-feedback { padding-top: .2rem; }
  .grid-layout.show-all-months .task-grid { min-width: 56rem; }
  .grid-layout.show-all-months .task-options-row td { padding: .75rem; }
  .grid-layout.show-all-months .task-options-panel { min-width: 0; }
  .agent-panel { position: static; width: auto; margin-bottom: .75rem !important; }
}