:root {
     --perm-navy: #1e2d3d;
     --perm-navy-2: #2e4257;
     --perm-gold: #b58b3a;
     --perm-navy-soft: rgba(30, 45, 61, 0.1);
     --perm-gold-soft: rgba(181, 139, 58, 0.14);
     --bs-primary: #1e2d3d;
     --bs-primary-rgb: 30, 45, 61;

     /* Paleta única de estados de projeto — usada pelos chips do modal,
        pelos badges dos cards, pelo acento esquerdo e pelas barras de progresso. */
     --estado-em-curso: #16a34a;
     --estado-pendente: #f59e0b;
     --estado-em-pausa: #b58b3a;
     --estado-concluido: #2563eb;
     --estado-cancelado: #dc3545;
     --estado-arquivado: #64748b;
 }

html {
    overflow-y: auto;
    overflow-x: hidden;
}

 body {
     font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     background: radial-gradient(circle at top left, rgba(30, 45, 61, 0.1), transparent 30%),
         radial-gradient(circle at bottom right, rgba(181, 139, 58, 0.1), transparent 35%),
         #eff3f8;
     color: #222;
     min-height: 100vh;
     padding-bottom: 180px;
 }

 header {
    position: sticky;
    top: 0;
    z-index: 1040;
    background:
        linear-gradient(140deg, rgba(34, 52, 72, 0.96) 0%, rgba(30, 45, 61, 0.96) 58%, rgba(26, 37, 50, 0.96) 100%),
        radial-gradient(circle at 12% 0%, rgba(181, 139, 58, 0.2), transparent 38%);
    backdrop-filter: blur(6px);
    padding: 0.58rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
 }

 header .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
    min-height: 66px;
 }

 header .app-brand {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     min-height: 0;
     max-width: fit-content;
    padding: 0.2rem 0.1rem;
 }

 header .app-logo {
     width: auto;
    height: clamp(44px, 5vw, 58px);
    max-width: min(66vw, 220px);
     object-fit: contain;
     border-radius: 0;
     filter: none;
     display: none;
 }

 header .app-logo[src]:not([src=""]) {
     display: block;
 }

 header .app-logo.has-image {
     display: block;
 }

 main#app {
     padding-top: 0.6rem;
     padding-bottom: 7.5rem !important;
 }

 @media (max-width: 991px) {
     main#app {
         padding-bottom: 8.5rem !important;
     }

     .expense-modal-header {
         padding: 1rem 1rem 0.85rem;
     }

     .expense-modal-body {
         padding: 0.95rem 1rem 1rem;
     }

     .expense-form-field {
         padding: 0.8rem 0.9rem;
     }
 }

 @media (min-width: 992px) {
     main#app {
         max-width: 1440px;
         padding-top: 1rem;
         padding-bottom: 3.5rem !important;
     }

     header .container {
         max-width: 1440px;
     }

     .dashboard-page,
     .projects-page,
     .expenses-page {
         display: grid;
         gap: 1.25rem;
     }

     .dashboard-grid {
         display: grid;
         grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
         gap: 1.25rem;
         align-items: start;
     }

     .dashboard-column {
         display: grid;
         gap: 1.25rem;
     }

     .dashboard-page #listaAreas {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 1rem;
     }

     .dashboard-card,
     .project-card,
     .expense-card {
         height: 100%;
     }

     .projects-header,
     .expenses-header,
     .tab-page-header,
     .projects-filters {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 1rem;
     }

     .projects-filters {
         display: block;
         align-items: initial;
     }

     .projects-filters-head-row {
         width: 100%;
     }

.projects-filters-shell,
.filters-shell {
    display: block;
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.95));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.projects-filters-shell.is-open,
.filters-shell.is-open {
    border-color: rgba(30, 45, 61, 0.2);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    background: #fff;
}

.projects-filters-head-row .btn,
.filters-head-row .filters-toggle-btn {
    border-radius: 999px;
    padding: 0.42rem 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.projects-filters-panel,
.filters-panel {
    border-top: 1px dashed rgba(30, 45, 61, 0.15);
    padding-top: 0.85rem;
}

.projects-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: end;
}

.projects-filter-name-col {
    grid-column: auto;
}

.projects-filters-panel .form-select,
.projects-filters-panel .form-control,
.filters-panel .form-select,
.filters-panel .form-control,
.report-filters .form-select,
.report-inline-filters .form-select {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    border-radius: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}


     .expense-card-body {
         align-items: center;
     }

         .expense-card-info {
             flex: 1 1 auto;
             min-width: 0;
             overflow-wrap: anywhere;
         }

         .expense-card-value {
             flex: 0 0 auto;
             min-width: max-content;
             white-space: nowrap;
         }

     .area-card {
         margin-bottom: 0 !important;
     }

     .area-card .card-body {
         padding: 1.1rem 1.15rem;
     }
 }

 .area-card {
     transition: transform 0.2s ease, box-shadow 0.2s ease;
     overflow: visible;
 }

 .card.area-card {
     overflow: visible;
 }

 .card.area-card .card-body {
     overflow: visible;
 }

 .area-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
 }

 .area-card .card-body {
     padding: 1rem 1.05rem;
 }

 .area-card-icon {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 0.9rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, rgba(181, 139, 58, 0.18), rgba(30, 45, 61, 0.08));
     color: var(--perm-navy);
     font-size: 1.05rem;
     flex-shrink: 0;
     border: 1px solid rgba(181, 139, 58, 0.2);
 }

 .area-card-icon-protected {
     background: linear-gradient(135deg, rgba(181, 139, 58, 0.24), rgba(181, 139, 58, 0.08));
     color: var(--perm-gold);
 }

 .area-card-meta {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
     flex-wrap: wrap;
     color: #6b7280;
     font-size: 0.82rem;
     margin-top: 0.2rem;
 }

 .area-card .area-category-chart {
     margin-top: 0.8rem;
 }

 .area-card .area-category-empty {
     margin-top: 0.55rem;
 }

 .area-card .dropdown {
     flex-shrink: 0;
     position: relative;
 }

 .area-card .dropdown-menu {
     z-index: 1100;
     position: absolute;
 }

 .area-icon-preview {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 0.9rem;
     background: linear-gradient(135deg, rgba(181, 139, 58, 0.18), rgba(30, 45, 61, 0.08));
     color: var(--perm-navy);
     font-size: 1.1rem;
     border: 1px solid rgba(181, 139, 58, 0.2);
 }

 .area-icon-option {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.28rem;
     border-radius: 999px;
     border: 1px solid rgba(30, 45, 61, 0.16);
     background: #fff;
     color: var(--perm-navy);
     padding: 0.34rem 0.58rem;
     min-width: auto;
     white-space: nowrap;
     flex: 0 0 auto;
 }

 .area-icon-option i {
     font-size: 0.95rem;
     line-height: 1;
 }

 .area-icon-option span {
     font-size: 0.8rem;
     line-height: 1;
 }

 .area-icon-option .ms-1 {
     margin-left: 0.28rem !important;
 }

 .area-icon-option.active {
     background: var(--perm-navy);
     color: #fff;
     border-color: var(--perm-navy);
 }

 .area-icon-option:hover {
     border-color: var(--perm-gold);
     color: var(--perm-navy);
 }

 @media (min-width: 992px) {


     .area-mini-summary {
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 0.75rem;
         padding: 0.55rem 0.7rem;
         border-radius: 0.9rem;
         background: rgba(181, 139, 58, 0.08);
         border: 1px solid rgba(181, 139, 58, 0.22);
     }

     .area-mini-summary-name {
         min-width: 0;
     }

     .dashboard-total-card


     .dashboard-total-card .area-mini-summary {
         min-height: 56px;
     }

     .card-body {
         padding: 1.65rem;
     }

     #bottomBar {
         width: min(920px, calc(100% - 48px));
     }
 }

 .card {
     border: none;
     border-radius: 1.35rem;
     box-shadow: 0 18px 34px rgba(15, 23, 42, 0.07);
     overflow: hidden;
 }

  .card-body {
     padding: 1.45rem;
 }

 .dashboard-total-card .card-body {
     padding: 1.45rem;
 }

 .finance-summary-title {
     color: var(--perm-navy);
     font-size: 1.25rem;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 0.95rem !important;
 }

 .finance-summary-card {
     display: grid;
     gap: 0.1rem;
 }

 .finance-summary-layout {
     display: grid;
     grid-template-columns: minmax(110px, 0.72fr) minmax(160px, 1.28fr);
     gap: 0.8rem;
     align-items: stretch;
 }

 .finance-summary-column {
     display: grid;
     align-content: center;
     gap: 0.35rem;
 }

 .finance-total-box {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
     padding: 0.75rem 0.85rem 0.8rem;
     background: rgba(181, 139, 58, 0.08);
     border: 1px solid rgba(181, 139, 58, 0.22);
     border-radius: 0.75rem;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }

 .finance-total-box .small {
     color: #64748b !important;
     font-size: 0.78rem;
     font-weight: 600;
     margin: 0 !important;
 }

 .finance-total-box h3 {
     font-size: clamp(1.2rem, 1.8vw, 1.65rem);
     line-height: 1.08;
     color: var(--perm-navy);
     white-space: nowrap;
 }

 #resumoFinanceiroValores {
     margin-top: 0 !important;
 }

 #resumoOrcamento {
     min-height: 0;
 }

 #resumoOrcamento > .d-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 0.35rem;
     margin-top: 0;
 }

 .finance-budget-metric {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
     min-width: 0;
     padding: 0.62rem 0.75rem;
     border: 1px solid rgba(30, 45, 61, 0.1);
     border-radius: 0.7rem;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 }

 .finance-budget-metric--budget {
     background: #f8f9fa;
 }

 .finance-budget-metric--remaining {
     background: rgba(25, 135, 84, 0.08);
     border-color: rgba(25, 135, 84, 0.16);
 }

 .finance-budget-metric--over {
     background: rgba(220, 53, 69, 0.08);
     border-color: rgba(220, 53, 69, 0.16);
 }

 .finance-metric-label {
     display: block;
     color: #64748b;
     font-size: 0.72rem;
     font-weight: 600;
     line-height: 1.2;
     margin: 0;
 }

 .finance-budget-metric strong {
     font-size: 0.82rem;
     line-height: 1.15;
 }

 .finance-chart-column {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 0;
 }

 .finance-chart-stack {
     width: 100%;
     display: grid;
     grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 1.1fr);
     align-items: center;
     gap: 0.45rem;
     margin-top: 0;
 }

 .finance-donut-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     min-height: 192px;
 }

 .finance-donut-wrap svg {
     display: block;
     max-width: 100%;
     width: 190px;
     height: 190px;
 }

 .finance-chart-legend {
     width: 100%;
     max-width: 230px;
     display: grid;
     gap: 0.3rem;
     font-size: 0.82rem;
 }

 @media (min-width: 768px) and (max-width: 991px) {
     .finance-summary-layout {
         grid-template-columns: minmax(210px, 0.9fr) minmax(280px, 1.1fr);
         gap: 1rem;
     }

     .finance-chart-stack {
         grid-template-columns: minmax(170px, 0.85fr) minmax(150px, 1.15fr);
     }
 }

 @media (max-width: 767px) {
     .finance-summary-layout {
         grid-template-columns: minmax(0, 1fr);
         gap: 1rem;
     }

     .finance-chart-column {
         padding-top: 0.15rem;
     }
 }

 @media (max-width: 560px) {
     .finance-chart-stack {
         grid-template-columns: minmax(0, 1fr);
         gap: 0.5rem;
     }

     .finance-chart-legend {
         max-width: none;
     }

     .finance-donut-wrap {
         min-height: 178px;
     }

     .finance-donut-wrap svg {
         width: 178px;
         height: 178px;
     }
 }

 .finance-legend-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 0.55rem;
     padding-top: 0.12rem;
 }

 .finance-legend-item + .finance-legend-item {
     border-top: 1px dashed rgba(30, 45, 61, 0.08);
     padding-top: 0.25rem;
 }

 .finance-legend-label {
     display: flex;
     align-items: center;
    gap: 0.48rem;
     min-width: 0;
     color: #4b5563;
 }

 .finance-legend-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     flex: 0 0 auto;
 }

 .finance-legend-item strong {
     color: var(--perm-navy);
     font-weight: 700;
 }

 #graficoOrcamento {
     margin-top: 0;
 }

 .finance-chart-legend > div:not(:last-child) {
     border-bottom: 1px dashed rgba(30, 45, 61, 0.08);
 }

 .finance-chart-legend strong {
     color: var(--perm-navy);
     font-weight: 700;
 }

 #graficoOrcamento .position-absolute small {
     color: rgba(30, 45, 61, 0.72) !important;
     font-weight: 600;
 }

 #graficoOrcamento .position-absolute strong {
     color: var(--perm-navy);
 }

 .selection-chip-group {
     display: flex;
     flex-wrap: wrap;
     gap: 0.7rem;
     row-gap: 0.75rem;
 }

 .expense-modal-content {
     border: 0;
     border-radius: 1.35rem;
     overflow: hidden;
 }

 .expense-modal-header {
     padding: 1.1rem 1.2rem 0.9rem;
     border-bottom: 1px solid rgba(30, 45, 61, 0.08);
     align-items: center;
 }

 .modal-header-icon-badge {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     background: rgba(181, 139, 58, 0.12);
     color: var(--perm-gold);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     flex-shrink: 0;
 }

 .expense-modal-header .modal-title {
     color: var(--perm-navy);
     font-weight: 800;
 }

 .expense-modal-header .modal-subtitle {
     font-size: 0.88rem;
     color: #64748b;
 }

 .expense-modal-body {
     padding: 1rem 1.2rem 1.2rem;
 }



 .expense-form-field .form-label {
     font-weight: 700;
     color: var(--perm-navy);
     margin-bottom: 0.45rem;
 }

 .expense-form-field .form-control,
 .expense-form-field .form-select,
 .expense-form-field .expense-textarea {
     min-height: 46px;
     border-radius: 0.85rem;
     border: 1px solid rgba(30, 45, 61, 0.12);
     padding: 0.65rem 0.85rem;
     box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
 }

 .expense-valor-input {
     font-size: 0.95rem !important;
     font-weight: 400 !important;
     color: var(--perm-navy) !important;
 }

 .expense-form-field .expense-textarea {
     min-height: 84px;
     resize: vertical;
     line-height: 1.5;
 }

 .expense-modal-footer {
     display: flex;
     flex-wrap: wrap;
     gap: 0.6rem;
     padding: 0.9rem 1.25rem;
     border-top: 1px solid rgba(30, 45, 61, 0.08);
 }

 [data-theme="dark"] .modal-header-icon-badge {
     background: rgba(181, 139, 58, 0.2);
     color: #f1c775;
 }

 [data-theme="dark"] .expense-form-field-highlight {
     border-color: rgba(181, 139, 58, 0.35);
     background: linear-gradient(180deg, #182535, #141f2d);
 }

 [data-theme="dark"] .expense-valor-input {
     color: #f8fafc !important;
 }

 [data-theme="dark"] .expense-modal-footer {
     border-top-color: rgba(255, 255, 255, 0.08);
 }

 .expense-form-field .form-text {
     font-size: 0.82rem;
     color: #64748b;
 }

 .expense-form-field .selection-chip-group-compact {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     row-gap: 0.5rem;
 }

 @media (max-width: 991px) {
     .expense-form-field .selection-chip-group-compact .selection-chip {
         width: 100%;
         justify-content: center;
     }
 }

 .modal-desktop-grid {
     display: grid;
     gap: 1rem;
 }

 .modal-desktop-stack {
     display: grid;
     gap: 0.75rem;
 }

 .modal-field-card,
 .modal-helper-card {
     padding: 1rem 1.05rem;
     border: 1px solid rgba(30, 45, 61, 0.08);
     border-radius: 1rem;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.96));
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }

 .modal-helper-card {
     background: linear-gradient(135deg, rgba(181, 139, 58, 0.12), rgba(30, 45, 61, 0.05));
     border-color: rgba(181, 139, 58, 0.2);
 }

 .modal-subtitle {
     font-size: 0.9rem;
     color: #64748b;
 }

 @media (min-width: 992px) {
     .modal-desktop-grid {
         grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
         align-items: start;
         gap: 1rem;
     }

     .modal-dialog.modal-lg {
         max-width: 980px;
     }
 }

 .expense-existing-attachment-item {
     border: 1px solid rgba(30, 45, 61, 0.1);
     border-radius: 0.95rem;
     padding: 0.75rem 0.85rem;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }

 .expense-existing-attachment-item+.expense-existing-attachment-item {
     margin-top: 0.6rem;
 }

 .expense-existing-attachment-item.is-removing {
     border-color: rgba(220, 53, 69, 0.35);
     background: linear-gradient(180deg, rgba(248, 213, 216, 0.9), rgba(255, 255, 255, 0.95));
 }

 .expense-existing-attachment-item .expense-attachment-remove-btn {
     white-space: nowrap;
     padding: 0.35rem 0.7rem;
 }

 .expense-upload-shell {
     border: 1px dashed rgba(30, 45, 61, 0.22);
     border-radius: 1rem;
     padding: 1rem;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 250, 0.96));
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.55rem;
     text-align: center;
     cursor: pointer;
     transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
 }

 .expense-upload-shell:hover,
 .expense-upload-shell:focus-visible {
     border-color: rgba(181, 139, 58, 0.55);
     background: linear-gradient(180deg, #ffffff, rgba(254, 250, 243, 0.9));
     box-shadow: 0 6px 18px rgba(181, 139, 58, 0.1);
     outline: none;
 }

 .expense-upload-shell.is-dragover {
     border-color: var(--perm-gold);
     border-style: solid;
     background: rgba(181, 139, 58, 0.09);
 }

 .expense-upload-icone {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2.6rem;
     height: 2.6rem;
     border-radius: 50%;
     background: var(--perm-gold-soft);
     color: var(--perm-gold);
     font-size: 1.25rem;
     flex-shrink: 0;
 }

 .expense-upload-texto {
     display: flex;
     flex-direction: column;
     gap: 0.15rem;
     color: var(--perm-navy);
     line-height: 1.35;
 }

 .expense-upload-shell .btn {
     align-self: center;
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
 }

 .expense-upload-shell .form-text {
     margin-top: 0.25rem;
 }

 .expense-upload-shell kbd {
     background: rgba(30, 45, 61, 0.07);
     color: var(--perm-navy);
     border-radius: 0.3rem;
     padding: 0.05rem 0.3rem;
 }

 [data-theme="dark"] .expense-upload-shell {
     background: linear-gradient(180deg, #182535, #141f2d);
     border-color: rgba(255, 255, 255, 0.14);
 }

 [data-theme="dark"] .expense-upload-shell:hover,
 [data-theme="dark"] .expense-upload-shell:focus-visible {
     border-color: rgba(181, 139, 58, 0.6);
     background: linear-gradient(180deg, #1b2a3c, #16212f);
 }

 [data-theme="dark"] .expense-upload-texto {
     color: #e2e8f0;
 }

 [data-theme="dark"] .expense-upload-shell kbd {
     background: rgba(255, 255, 255, 0.12);
     color: #e2e8f0;
 }

 .selection-chip {
     border: 1px solid rgba(30, 45, 61, 0.16);
     background: #fff;
     color: var(--perm-navy);
     border-radius: 999px;
     padding: 0.62rem 0.95rem;
     font-size: 0.92rem;
     font-weight: 600;
     transition: all 0.2s ease;
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
 }

 .selection-chip:hover {
     border-color: var(--perm-gold);
     color: var(--perm-gold);
     transform: translateY(-1px);
 }

 .selection-chip.active {
     background: var(--perm-navy);
     color: #fff;
     border-color: transparent;
     box-shadow: none;
 }

 .selection-chip[data-color] {
     border-color: color-mix(in srgb, var(--chip-color, var(--perm-navy)) 28%, #ffffff);
 }

 .selection-chip[data-color]:not(.active) {
     color: var(--chip-color, var(--perm-navy));
 }

 .selection-chip-group-compact .selection-chip {
     padding: 0.45rem 0.7rem;
     font-size: 0.88rem;
 }

 .tab-page-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 0.85rem;
     margin-bottom: 1rem !important;
     padding-bottom: 0.8rem;
     border-bottom: 1px solid rgba(30, 45, 61, 0.1);
 }

 .tab-page-title {
     margin: 0;
     color: var(--perm-navy);
     font-weight: 800;
     letter-spacing: 0.01em;
     font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
 }

 .tab-page-subtitle {
     margin: 0;
     color: #5d6b83;
     font-weight: 500;
 }

 .tab-page-action-btn {
     border-radius: 999px;
     padding: 0.58rem 0.9rem;
     font-weight: 700;
     letter-spacing: 0.01em;
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     white-space: nowrap;
 }

 .tab-page-action-btn i {
     font-size: 1rem;
 }

 .dashboard-hero {
     margin-bottom: 1rem !important;
     /* Igual ao .tab-page-header (padding-top 0 / padding-bottom 0.8rem):
        garante o mesmo gap ao topo da janela nas restantes páginas. */
     padding: 0 0 0.8rem;
     border-bottom: 1px solid rgba(30, 45, 61, 0.1);
     position: relative;
     /* As restantes páginas têm cabeçalho com ~80px de altura.
        O título do dashboard é maior, por isso o min-height garante
        que a linha fica à mesma distância do topo da janela. */
     min-height: 80px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .dashboard-hero-main {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
 }

 .dashboard-hero-title-row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.65rem;
     padding: 0;
     border-radius: 0;
     background: transparent;
     border: 0;
     box-shadow: none;
 }

 .dashboard-project-title {
     font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
     font-weight: 900;
     line-height: 1.04;
     color: var(--perm-navy);
     letter-spacing: -0.01em;
     margin: 0;
 }

 .dashboard-attention {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 0.9rem;
     margin-bottom: 1rem;
     border: 1px solid rgba(30, 45, 61, 0.1);
     border-radius: 0.85rem;
     background: #fff;
 }

 .dashboard-attention--active {
     border-color: rgba(220, 53, 69, 0.2);
     background: rgba(220, 53, 69, 0.04);
 }

 .dashboard-attention--clear {
     border-color: rgba(25, 135, 84, 0.18);
     background: rgba(25, 135, 84, 0.04);
 }

 .dashboard-attention-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 2rem;
     height: 2rem;
     flex: 0 0 auto;
     border-radius: 0.6rem;
     color: #dc3545;
     background: rgba(220, 53, 69, 0.1);
 }

 .dashboard-attention--clear .dashboard-attention-icon {
     color: #198754;
     background: rgba(25, 135, 84, 0.1);
 }

 .dashboard-attention-content {
     display: grid;
     min-width: 0;
 }

 .dashboard-attention-content strong {
     color: var(--perm-navy);
     font-size: 0.86rem;
 }

 .dashboard-attention-content span,
 .dashboard-attention-stats {
     color: #64748b;
     font-size: 0.75rem;
 }

 .dashboard-attention-stats {
     display: flex;
     flex-wrap: wrap;
     gap: 0.4rem 0.8rem;
     margin-left: auto;
 }

 .dashboard-attention-stats span {
     display: inline-flex;
     gap: 0.25rem;
     align-items: center;
 }

 .dashboard-attention-stats b {
     color: var(--perm-navy);
 }

 .dashboard-attention-stats em {
     font-style: normal;
     color: #dc3545;
     font-weight: 700;
 }

 @media (max-width: 575px) {
     .dashboard-attention {
         align-items: flex-start;
         flex-wrap: wrap;
     }

     .dashboard-attention-stats {
         width: 100%;
         margin-left: 2.75rem;
     }
 }

 .dashboard-project-switcher-btn {
     width: 32px;
     height: 32px;
     border-radius: 999px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-color: rgba(30, 45, 61, 0.18);
     background: rgba(30, 45, 61, 0.04);
     color: var(--perm-navy);
 }

 .dashboard-project-switcher-btn:hover,
 .dashboard-project-switcher-btn:focus {
     background: rgba(181, 139, 58, 0.2);
     border-color: rgba(181, 139, 58, 0.55);
     color: var(--perm-navy);
 }

 .app-status-badge,
 .dashboard-status-badge {
     border-radius: 999px;
     font-size: 0.9rem !important;
     font-weight: 800;
     padding: 0.42rem 0.8rem !important;
     line-height: 1.15;
     text-transform: none !important;
     letter-spacing: 0.01em;
     align-self: center;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 1.95rem;
     border: 1px solid rgba(0, 0, 0, 0.08);
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }

 .app-status-badge.text-bg-warning,
 .dashboard-status-badge.text-bg-warning {
     color: #7a4b00 !important;
     background-color: #ffc107 !important;
 }

 .app-status-badge.text-bg-info,
 .dashboard-status-badge.text-bg-info {
     color: #0c5460 !important;
     background-color: #17a2b8 !important;
 }

 .app-status-badge.text-bg-success,
 .dashboard-status-badge.text-bg-success {
     background-color: #198754 !important;
 }

 .app-status-badge.text-bg-danger,
 .dashboard-status-badge.text-bg-danger {
     background-color: #dc3545 !important;
 }

 .app-status-badge.text-bg-primary,
 .dashboard-status-badge.text-bg-primary {
     background-color: #0d6efd !important;
 }

 .app-status-badge.text-bg-secondary,
 .dashboard-status-badge.text-bg-secondary {
     background-color: #6c757d !important;
 }

 @media (max-width: 575px) {
    /* Mobile: cabeçalho em linha em TODAS as páginas — título à esquerda,
       sino no canto superior direito (posição idêntica em todo o lado).
       Os botões de ação quebram para a linha seguinte, dentro do próprio
       grupo de ações, sem empurrar o sino para baixo. */
    .tab-page-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .tab-page-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
    .tab-page-header .tab-notificacoes-wrap,
    .dashboard-hero .tab-notificacoes-wrap {
        /* Sino fixo no canto superior direito do cabeçalho, em todas as
           páginas, mesmo quando os botões de ação quebram de linha. */
        position: absolute;
        top: 0;
        right: 0;
        order: 0;
        margin: 0;
    }
    .tab-page-header,
    .dashboard-hero {
        position: relative;
        padding-right: 3rem; /* espaço reservado ao sino */
    }
    .dashboard-hero {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .dashboard-hero .dashboard-hero-main {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }

    .projects-filters-panel .form-select,
    .projects-filters-panel .form-control,
    .filters-panel .form-select,
    .filters-panel .form-control,
    .report-filters .form-select,
    .report-inline-filters .form-select {
        min-width: 0;
        width: 100% !important;
    }

    .projects-filters-grid {
        grid-template-columns: 1fr;
    }

    /* Grupo de botões de ação: ocupa a linha toda e alinha os botões
       encostados à direita, igual ao sino — o padding-right de 3rem do
       cabeçalho (reservado ao sino na primeira linha) é cancelado aqui,
       porque os botões ficam na linha de baixo e não colidem com ele. */
    .tab-page-header > div:last-child {
        /* Alarga o bloco para a direita (3rem do sino + 0.85rem do #app)
           para os botões ficarem encostados à borda do ecrã.
           A margem negativa acompanha o excesso para o layout não correr. */
        /* Espaço para alcançar a borda (3rem do sino + 0.85rem do #app)
           menos um respiro final de 0.75rem para os botões não ficarem
           colados ao lado do ecrã. */
        width: calc(100% + 3.85rem - 0.75rem);
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-right: -3.85rem;
    }
    .tab-page-action-btn {
        width: auto;
        justify-content: center;
    }

    #acoesCabecalhoDespesas {
        flex-wrap: nowrap;
        width: calc(100% + 3.85rem - 0.75rem);
        margin-right: -3.85rem;
    }

    #acoesCabecalhoDespesas .btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        padding-inline: 0.65rem;
    }

    #acoesCabecalhoDespesas .tab-page-action-btn {
        width: auto;
    }

     .dashboard-hero {
         /* 3rem à direita: mantém o espaço reservado ao sino
            (sem isto, o badge de estado fica cortado por baixo dele) */
         padding: 0.2rem 3rem 0.7rem 0;
     }

     .dashboard-hero-main {
         align-items: flex-start;
     }

     .dashboard-hero-title-row {
         gap: 0.45rem;
     }

     .dashboard-project-title {
         font-size: 1.95rem;
     }
     .dashboard-page .dashboard-notificacoes-wrap {
         margin-left: auto;
         flex-shrink: 0;
     }
     .dashboard-page .dashboard-notificacoes-sino {
         width: 2.3rem;
         height: 2.3rem;
     }
     .dashboard-page .dashboard-notificacoes-menu {
          /* Em mobile: fixo ao viewport para nunca ficar cortado */
          position: fixed;
          top: 0.75rem;
          bottom: auto;
          left: 0.75rem;
          right: 0.75rem;
          min-width: 0;
          width: auto;
          max-width: none;
          max-height: min(24rem, 55vh);
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
          border-radius: 0.75rem;
      }
      /* Em mobile o sino fica por cima de tudo (incl. barra de navegação) */
      .dashboard-page .dashboard-notificacoes-wrap {
          z-index: 1080;
      }

     .dashboard-status-badge {
         font-size: 0.52rem !important;
         padding: 0.16rem 0.36rem !important;
     }
 }

 .btn,
 .btn-primary,
 .btn-secondary,
 .btn-outline-primary,
 .btn-outline-secondary {
     border-radius: 999px;
     font-weight: 700;
     letter-spacing: 0.01em;
     padding: 0.62rem 1rem;
     transition: all 0.2s ease;
     box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
 }

 .btn:hover,
 .btn-primary:hover,
 .btn-secondary:hover,
 .btn-outline-primary:hover,
 .btn-outline-secondary:hover {
     transform: translateY(-1px);
 }

 .btn-primary {
     background-color: var(--perm-navy-2);
     border-color: var(--perm-navy-2);
     color: #fff;
     box-shadow: 0 4px 10px rgba(11, 31, 58, 0.14);
 }

 .btn-primary:hover {
     background-color: var(--perm-navy);
     border-color: var(--perm-navy);
     box-shadow: 0 6px 12px rgba(11, 31, 58, 0.16);
 }

 .btn-primary:focus-visible {
     box-shadow: 0 0 0 0.2rem rgba(30, 45, 61, 0.18), 0 4px 10px rgba(11, 31, 58, 0.14);
 }

 .btn-primary:active {
     box-shadow: 0 2px 8px rgba(11, 31, 58, 0.12) !important;
 }

 .btn-secondary {
     background-color: #f3f5f8;
     border-color: #e2e7ef;
     color: var(--perm-navy);
 }

 .btn-secondary:hover {
     background-color: #e8edf3;
     border-color: #d8e0ea;
     color: var(--perm-navy);
 }

 .btn-outline-primary {
     color: var(--perm-navy);
     border-color: rgba(30, 45, 61, 0.25);
     background-color: #fff;
 }

 .btn-outline-primary:hover,
 .btn-outline-primary:focus {
     background-color: var(--perm-gold);
     border-color: var(--perm-gold);
     color: #1e2d3d;
 }

 .btn-outline-secondary {
     color: var(--perm-navy);
     border-color: rgba(30, 45, 61, 0.18);
     background-color: #fff;
 }

 .btn-outline-secondary:hover,
 .btn-outline-secondary:focus {
     background-color: rgba(30, 45, 61, 0.06);
     border-color: rgba(30, 45, 61, 0.28);
     color: var(--perm-navy);
 }

 .projects-page #btnNovoProjeto {
     border-radius: 999px;
     padding: 0.62rem 1rem;
     font-weight: 700;
     letter-spacing: 0.01em;
     box-shadow: 0 4px 10px rgba(30, 45, 61, 0.14);
 }

 .projects-page #btnNovoProjeto i {
     margin-right: 0.3rem;
 }

 .form-control,
 .form-select {
     border-radius: 0.85rem;
     border: 1px solid rgba(30, 45, 61, 0.16);
     box-shadow: inset 0 1px 2px rgba(30, 45, 61, 0.05);
 }

 .form-label {
     font-weight: 600;
     color: #3c4a6b;
 }

 #bottomBar #fab {
    position: relative;
    min-width: 64px;
    width: 90px;
    height: 64px;
    padding: 0;
    font-size: 0.84rem;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(30, 45, 61, 0.28);
    background: var(--perm-navy);
    color: #fff;
    box-shadow: 0 7px 14px rgba(15, 23, 42, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
    z-index: 1;
    flex: 0 0 auto;
    margin-left: 20px;
    margin-right: 20px;
}

 #bottomBar #fab i {
    font-size: 1.38rem;
    color: #fff;
}

 #bottomBar #fab .fab-label {
    display: none;
 }

 #bottomBar {
     position: fixed;
     bottom: 18px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: min(820px, calc(100% - 30px));
    min-height: 76px;
    background: rgba(255, 255, 255, 0.94);
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    border-radius: 22px;
    border: 1px solid rgba(30, 45, 61, 0.12);
    gap: 0.45rem;
    padding: 0.48rem 0.55rem;
     z-index: 1030;
 }

 /* Mantem modais do Bootstrap acima da barra inferior fixa */
 .modal-backdrop {
     z-index: 1050;
 }

 .modal {
     z-index: 1060;
 }

 /* Evita que o menu dos 3 pontos dos projetos fique cortado pelo card */
 .project-card,
 .project-card .card-body,
 .expense-card,
 .expense-card .card-body {
     overflow: visible;
 }

 .project-card {
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
 }

 .project-card .card-body {
     box-shadow: none !important;
 }

 .project-card .btnAbrirProjeto {
     box-shadow: none !important;
     background: transparent !important;
     border: 0 !important;
     color: inherit;
     text-align: left;
 }

 .project-card-title {
     min-width: 0;
     color: var(--perm-navy);
 }

 .project-card-title h4 {
      font-size: 1.25rem;
      font-weight: 750;
      letter-spacing: -0.015em;
      line-height: 1.3;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.35rem 0.5rem;
  }

  /* Nome limitado a 3 linhas; o badge de estado fica fora do clamp */
  .project-card-nome {
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      color: var(--perm-navy);
  }

 .project-card-title .badge {
     vertical-align: middle;
 }

 .project-card-actions {
     flex: 0 0 auto;
 }

 .project-card-actions > .btn {
     width: 2.15rem;
     height: 2.15rem;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.7rem;
 }

 .project-card-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
     gap: 0.6rem;
 }

 @media (min-width: 768px) {
     .project-card-stats {
         gap: 0.85rem;
     }
 }

 .project-card-stats > div {
     display: flex;
     flex-direction: column;
     gap: 0.18rem;
     min-width: 0;
     padding: 0.65rem 0.8rem;
     border: 1px solid rgba(30, 45, 61, 0.09);
     border-radius: 0.7rem;
     background: #f8fafc;
 }

 .project-card-stats span,
 .project-card-details,
 .project-card-note {
     color: #64748b;
     font-size: 0.78rem;
     line-height: 1.35;
 }

 .project-card-stats span {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.2;
      white-space: nowrap;
  }

  .project-card-stats strong {
      color: var(--perm-navy);
      font-size: 1.05rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      white-space: nowrap;
  }

 .project-card-stats strong small {
     font-size: 0.72rem;
     font-weight: 600;
     letter-spacing: 0;
     color: #94a3b8;
     margin-left: 0.15rem;
 }

 .project-card-details {
     display: flex;
     flex-wrap: wrap;
     gap: 0.35rem 0.85rem;
 }

 .project-card-note {
     padding-top: 0.7rem;
     border-top: 1px dashed rgba(30, 45, 61, 0.12);
 }

 /* Corpo do card sempre vertical: header → stats → nota.
    Padding progressivo: 1rem no mobile, 1.25rem a partir de 768px. */
 .project-card-body {
     display: flex;
     flex-direction: column;
     gap: 0.85rem;
     padding: 1rem;
 }

 @media (min-width: 768px) {
     .project-card-body {
         padding: 1.25rem;
     }
 }

 .project-card .dropdown-menu,
 .expense-card .dropdown-menu {
     z-index: 1070;
 }

 .expense-card-info {
     flex: 1 1 auto;
     min-width: 0;
     overflow-wrap: anywhere;
 }

 .expense-card-value {
     flex: 0 0 auto;
     min-width: max-content;
     white-space: nowrap;
 }

 .expense-attachment-list {
     min-width: 0;
 }

 .expense-attachment-item {
     min-width: 0;
     margin-top: 0.4rem !important;
     padding: 0.32rem 0.45rem !important;
     border-color: rgba(30, 45, 61, 0.1) !important;
     border-radius: 0.6rem !important;
     background: rgba(248, 250, 252, 0.82) !important;
 }

 .expense-attachment-name {
     min-width: 0;
     color: #526176;
     font-size: 0.72rem !important;
     line-height: 1.2;
 }

 .expense-attachment-name i {
     color: var(--perm-gold);
 }

 .expense-attachment-actions {
     flex: 0 0 auto;
 }

 .expense-attachment-actions .btn {
     width: 1.8rem;
     height: 1.8rem;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.5rem;
 }

 @media (max-width: 575px) {
     .expense-card-body {
         align-items: flex-start;
         gap: 0.75rem !important;
     }

     .expense-card-info {
         line-height: 1.35;
     }

     .expense-card-info .badge {
         white-space: normal;
         vertical-align: middle;
     }

     .expense-card-value {
         align-items: flex-start !important;
         min-width: 0;
     }
 }

 #bottomBar button:not(#fab) {
     border: none;
     background: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     flex: 1 1 0;
     min-width: 0;
    color: #61708a;
    font-size: 12px;
    gap: 0.22rem;
    padding: 0.52rem 0.3rem;
    border-radius: 13px;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
 }

#bottomBar button:not(#fab) i {
    font-size: 1.18rem;
}

#bottomBar button:not(#fab) span {
    font-weight: 600;
}

 .btnHeaderMenu {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.58);
    font-size: 1.28rem;
     width: 42px;
     height: 42px;
    padding: 0;
    border-radius: 0.7rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     margin-left: auto;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     cursor: pointer;
 }

@media (hover: hover) and (pointer: fine) {
    .btnHeaderMenu:hover {
        background-color: rgba(255, 255, 255, 0.06);
        border-color: transparent;
        color: rgba(255, 255, 255, 0.82);
    }
}

.btnHeaderMenu:focus-visible {
    outline: 2px solid rgba(181, 139, 58, 0.75);
    outline-offset: 2px;
}

 .btnHeaderMenu:active {
     transform: scale(0.95);
 }

@media (hover: none) and (pointer: coarse) {
    .btnHeaderMenu {
        -webkit-tap-highlight-color: transparent;
    }

    .btnHeaderMenu:hover,
    .btnHeaderMenu:focus {
        background: transparent;
        border-color: transparent;
        color: rgba(255, 255, 255, 0.58);
        box-shadow: none;
    }

    .btnHeaderMenu:active {
        background-color: rgba(255, 255, 255, 0.08);
        border-color: transparent;
        color: #fff;
    }
}

@media (max-width: 767px) {
    header {
        padding: 0.52rem 0.65rem;
    }

    header .container {
        min-height: 58px;
    }

    header .app-logo {
        height: clamp(38px, 9.2vw, 48px);
        max-width: min(70vw, 200px);
    }

    .btnHeaderMenu {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
        border-radius: 0.72rem;
    }
}

 @media (max-width: 520px) {
     #bottomBar {
         bottom: calc(24px + env(safe-area-inset-bottom, 0px));
         width: calc(100% - 14px);
         padding: 0.34rem 0.42rem;
         gap: 0.22rem;
     }

     #bottomBar button {
         flex: 1 1 0;
         min-width: 48px;
         font-size: 11px;
         padding: 0.33rem 0.26rem;
     }

     #bottomBar button:not(#fab) span {
         display: none;
     }

     #bottomBar button:not(#fab) i {
         font-size: 1.22rem;
     }

     #bottomBar #fab {
         min-width: 60px;
         width: 60px;
         height: 56px;
         padding: 0;
         border-radius: 999px;
     }

     #bottomBar #fab span {
         display: none;
         font-size: 0.75rem;
         font-weight: 700;
     }

     #bottomBar #fab i {
         font-size: 1.3rem;
     }
 }

 #bottomBar button:not(#fab):hover,
 #bottomBar button:not(#fab).active {
     color: var(--perm-navy);
 }

 #bottomBar button:not(#fab).active {
     background: transparent;
     box-shadow: none;
     transform: none;
 }

#bottomBar button:not(#fab).active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 22%;
    width: 56%;
    height: 3px;
    border-radius: 999px;
    background: var(--perm-gold);
    opacity: 0.95;
}

 #bottomBar button:not(#fab).active i,
 #bottomBar button:not(#fab).active span {
     color: var(--perm-navy);
     font-weight: 700;
 }

@media (hover: hover) and (pointer: fine) {
    #bottomBar #fab:hover {
        background: #243648;
        border-color: rgba(181, 139, 58, 0.46);
        color: #fff;
        box-shadow: 0 12px 22px rgba(15, 23, 42, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
}

 @media (max-width: 767px) {
     .tab-page-subtitle {
         font-size: 0.92rem;
     }

     .tab-page-action-btn {
        min-height: 44px;
        height: 44px;
        padding: 0 0.95rem;
        font-size: 0.92rem;
        line-height: 1;
        gap: 0.4rem;
    }

    .tab-page-action-btn i {
        font-size: 0.95rem;
        line-height: 1;
    }

    .projects-page #btnNovoProjeto,
    .expenses-page #btnAdicionarDespesa,
    .documents-page #btnToggleNovoDocumento {
        min-height: 44px;
        height: 44px;
        padding: 0 0.95rem;
     }
 }

 #bottomBar button i {
     font-size: 1.25rem;
 }

 .badge {
     border-radius: 999px;
     padding: 0.55rem 0.8rem;
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }

 .report-header-row {
     align-items: flex-start;
 }

 .report-actions {
     display: grid;
     gap: 0.75rem;
    width: min(100%, 900px);
 }

 .report-actions-main {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 0.75rem;
    flex-wrap: nowrap;
 }

.report-inline-filters {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(150px, 190px);
    gap: 0.7rem;
    align-items: center;
    flex: 0 1 auto;
}

 .report-export-btn {
     border-radius: 999px;
     padding-inline: 1rem;
     box-shadow: 0 8px 18px rgba(30, 45, 61, 0.14);
 }

 .report-toggle {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
     padding: 0.7rem 0.9rem;
     border: 1px solid rgba(30, 45, 61, 0.14);
     border-radius: 999px;
     background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
     color: #334155;
     font-size: 0.9rem;
     line-height: 1.1;
     box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
 }

 .report-toggle input {
     width: 1.05rem;
     height: 1.05rem;
     accent-color: var(--perm-navy);
     flex: 0 0 auto;
 }

 .report-filters {
     display: grid;
     grid-template-columns: minmax(180px, 220px) minmax(160px, 180px);
     gap: 0.75rem;
     justify-content: end;
 }

.relatorio-tabela thead th {
    background: #eef3f9;
    color: #344155;
    font-size: 0.83rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.88rem 0.8rem;
    border-bottom-width: 1px;
}

.relatorio-tabela tbody td {
    padding: 0.86rem 0.8rem;
    vertical-align: middle;
}

.relatorio-tabela tbody tr:nth-child(even) {
    background: rgba(238, 243, 249, 0.45);
}

.relatorio-tabela {
    width: 100%;
    table-layout: fixed;
}

.relatorio-tabela th,
.relatorio-tabela td {
    overflow-wrap: anywhere;
}

.relatorio-tabela th:first-child,
.relatorio-tabela td:first-child {
    padding-left: 1rem;
}

.relatorio-tabela th:last-child,
.relatorio-tabela td:last-child {
    padding-right: 1rem;
}

.report-preview-shell {
    border: 1px solid rgba(30, 45, 61, 0.14);
    border-radius: 1rem;
    padding: 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.report-preview-iframe {
    width: 100%;
    height: 68vh;
    min-height: 480px;
    border: 1px solid rgba(30, 45, 61, 0.15);
    border-radius: 0.85rem;
    background: #fff;
}

 .expenses-filters-head {
     align-items: flex-start;
 }

 .expenses-filters-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 0.9rem;
 }

 .expenses-filters-grid .form-select,
 .expenses-filters-grid .form-control {
     border-radius: 0.95rem;
     min-height: 48px;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }

 .expenses-filters-grid .form-label {
     margin-bottom: 0.4rem;
     font-size: 0.9rem;
     color: #415269;
     font-weight: 600;
 }

 .doc-upload-shell {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     flex-wrap: wrap;
     padding: 0.85rem 0.95rem;
     border: 1px dashed rgba(30, 45, 61, 0.2);
     border-radius: 1rem;
     background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
 }

 .doc-upload-btn {
     border-radius: 999px;
     padding-inline: 1rem;
     white-space: nowrap;
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
 }

 .doc-upload-state {
     min-width: 0;
     flex: 1 1 220px;
     color: #475569;
     font-size: 0.92rem;
     line-height: 1.35;
 }

 .doc-upload-state strong {
     color: #1e2d3d;
 }

 .doc-upload-preview {
     display: grid;
     gap: 0.55rem;
     margin-top: 0.8rem;
 }

 .doc-upload-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.8rem;
     padding: 0.65rem 0.8rem;
     border: 1px solid rgba(30, 45, 61, 0.12);
     border-radius: 0.9rem;
     background: #fff;
     color: #334155;
 }

 .doc-upload-item span {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

 .doc-upload-item .btn {
     flex: 0 0 auto;
 }

 .doc-actions-group .btn {
     min-width: 110px;
 }

 .document-card {
     height: auto !important;
     margin-bottom: 0 !important;
 }

 .document-card-body {
     display: grid;
     gap: 0.7rem;
     padding: 1rem 1.1rem;
 }

 .document-card-header,
 .document-card-title-row {
     display: flex;
     align-items: flex-start;
     gap: 0.55rem;
     min-width: 0;
 }

 .document-card-header {
     justify-content: space-between;
 }

 .document-card-title-row {
     flex: 1 1 auto;
 }

 .document-card-icon {
     flex: 0 0 auto;
     margin-top: 0.1rem;
     color: var(--perm-gold);
     font-size: 1.15rem;
 }

 .document-card-title-row strong,
 .nomeDocumentoDisplay {
     min-width: 0;
     overflow-wrap: anywhere;
 }

 .document-card-edit {
     width: 2rem;
     height: 2rem;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     border-radius: 0.6rem;
 }

 .document-card-meta {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 0.3rem 0.55rem;
     color: #64748b;
     font-size: 0.76rem;
     line-height: 1.35;
 }

 .document-card-type {
     padding: 0.22rem 0.45rem;
     border-radius: 999px;
     background: rgba(181, 139, 58, 0.12);
     color: #806122;
     font-weight: 700;
 }

 .document-card-description {
     color: #526176;
     font-size: 0.82rem;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
    line-clamp: 2;
     overflow: hidden;
 }

 .document-card-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.45rem;
     padding-top: 0.65rem;
     border-top: 1px dashed rgba(30, 45, 61, 0.12);
 }

 .document-card-actions .btn {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     flex: 1 1 auto;
     justify-content: center;
     border-radius: 0.65rem;
     padding: 0.35rem 0.55rem;
     font-size: 0.75rem;
     font-weight: 600;
 }

 .settings-backup-panel {
     display: grid;
     gap: 0.65rem;
 }

 .settings-section-heading {
     padding-bottom: 0.8rem;
     border-bottom: 1px solid rgba(30, 45, 61, 0.08);
 }

 .settings-section-nav {
     display: inline-flex;
     gap: 0.35rem;
     margin-bottom: 1rem;
     padding: 0.3rem;
     border: 1px solid rgba(30, 45, 61, 0.1);
     border-radius: 0.85rem;
     background: rgba(255, 255, 255, 0.72);
 }

 .settings-nav-about {
     border-left: 1px solid rgba(30, 45, 61, 0.12);
     margin-left: 0.15rem;
     color: var(--perm-navy);
 }

 .settings-nav-about:hover,
 .settings-nav-about:focus-visible {
     background: rgba(181, 139, 58, 0.12);
     color: #806122;
 }

 .about-settings-card {
     overflow: hidden;
 }

 .about-settings-hero {
     display: flex;
     align-items: center;
     gap: 1.25rem;
     padding: 1.25rem;
     border-radius: 0.9rem;
     border: 1px solid rgba(181, 139, 58, 0.25);
     border-left: 4px solid var(--perm-gold);
     background: #f8fafc;
     color: var(--perm-navy);
 }

 .about-settings-logo {
     width: 176px;
     height: 76px;
     padding: 0;
     object-fit: contain;
     flex: 0 0 auto;
 }

 .about-settings-eyebrow {
     display: block;
     margin-bottom: 0.25rem;
    color: var(--perm-gold);
     font-size: 0.7rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
 }

 .about-settings-hero h3 {
     color: var(--perm-navy);
 }

 .about-settings-hero p {
     color: #64748b;
     line-height: 1.45;
 }

 .about-settings-features {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0.65rem;
     margin-top: 1rem;
 }

 .about-settings-features > div {
     display: grid;
     gap: 0.2rem;
     padding: 0.8rem;
     border: 1px solid rgba(30, 45, 61, 0.09);
     border-radius: 0.75rem;
     background: #f8fafc;
 }

 .about-settings-features i {
     color: var(--perm-gold);
     font-size: 1.15rem;
 }

 .about-settings-features strong {
     color: var(--perm-navy);
     font-size: 0.85rem;
 }

 .about-settings-features span,
 .about-settings-version {
     color: #64748b;
     font-size: 0.76rem;
     line-height: 1.35;
 }

 .about-settings-status {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin-top: 1rem;
 }

 .about-settings-status span {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     padding: 0.32rem 0.55rem;
     border-radius: 999px;
     background: rgba(25, 135, 84, 0.08);
     color: #27734d;
     font-size: 0.72rem;
     font-weight: 600;
 }

 .about-settings-principles {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.65rem;
     margin-top: 1rem;
 }

 .about-settings-principles > div {
     display: flex;
     align-items: flex-start;
     gap: 0.55rem;
     padding: 0.75rem;
     border: 1px dashed rgba(30, 45, 61, 0.16);
     border-radius: 0.7rem;
     color: #64748b;
     font-size: 0.78rem;
     line-height: 1.4;
 }

 .about-settings-principles i {
     flex: 0 0 auto;
     color: var(--perm-gold);
     font-size: 1rem;
 }

 .about-settings-principles strong {
     color: var(--perm-navy);
 }

 .about-settings-version {
     display: block;
     margin-top: 1rem;
 }

 .settings-nav-btn {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     padding: 0.52rem 0.8rem;
     border: 0;
     border-radius: 0.65rem;
     background: transparent;
     color: #64748b;
     font-size: 0.8rem;
     font-weight: 700;
 }

 .settings-nav-btn.active {
     background: var(--perm-navy);
     color: #fff;
     box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14);
 }

 .settings-panel {
     min-width: 0;
 }

 .settings-panel:not(.d-none) {
     width: 100%;
     max-width: 100%;
     flex: 0 0 100%;
 }

 .settings-section-block {
     padding-top: 0.15rem;
 }

 .settings-section-block > h6 {
     color: var(--perm-navy);
     font-size: 0.92rem;
 }

 .settings-panel-card {
     min-width: 0;
     padding: 0.95rem;
     border: 1px solid rgba(30, 45, 61, 0.09);
     border-radius: 0.9rem;
     background: #f8fafc;
 }

 /* Secção avançada colapsável (sincronização) */
 .sync-advanced {
     padding: 0;
 }

 .sync-advanced > summary {
     list-style: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
     padding: 0.85rem 0.95rem;
     font-size: 0.9rem;
     font-weight: 700;
     color: var(--perm-navy);
     border-radius: 0.9rem;
 }

 .sync-advanced > summary::-webkit-details-marker {
     display: none;
 }

 .sync-advanced[open] > summary {
     border-bottom: 1px solid rgba(30, 45, 61, 0.08);
     border-radius: 0.9rem 0.9rem 0 0;
 }

 .sync-advanced-chevron {
     transition: transform 0.2s ease;
     color: #64748b;
 }

 .sync-advanced[open] .sync-advanced-chevron {
     transform: rotate(180deg);
 }

 .sync-advanced-body {
     padding: 0.95rem;
 }

 [data-theme="dark"] .sync-advanced > summary {
     color: #f8fafc;
 }

 [data-theme="dark"] .sync-advanced[open] > summary {
     border-bottom-color: rgba(255, 255, 255, 0.08);
 }

 /* Campos de configuração em modo leitura (suaves/bloqueados) */
 .sync-config-readonly {
     background: rgba(30, 45, 61, 0.04) !important;
     border-color: rgba(30, 45, 61, 0.06) !important;
     color: #64748b !important;
     cursor: default;
     box-shadow: none !important;
 }

 .sync-config-readonly:focus {
     border-color: rgba(30, 45, 61, 0.06) !important;
     box-shadow: none !important;
 }

 .sync-config-readonly::placeholder {
     color: #adb5bd;
     font-style: italic;
 }

 [data-theme="dark"] .sync-config-readonly {
     background: rgba(255, 255, 255, 0.04) !important;
     border-color: rgba(255, 255, 255, 0.08) !important;
     color: #94a3b8 !important;
 }

 .settings-security-body {
     display: grid;
     gap: 1rem;
 }

 .settings-divider {
     display: none;
 }

 @media (min-width: 992px) {
     .settings-security-body {
         grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
         align-items: start;
     }

     .settings-security-body > .settings-section-heading,
     .settings-security-body > .settings-backup-panel {
         grid-column: 1 / -1;
     }

     .settings-security-body > .settings-backup-panel {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

 }

 .settings-backup-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.85rem;
     padding: 0.75rem 0.8rem;
     border: 1px solid rgba(30, 45, 61, 0.1);
     border-radius: 0.8rem;
     background: #f8fafc;
 }

 .settings-backup-row strong {
     display: block;
     color: var(--perm-navy);
     font-size: 0.88rem;
 }

 .settings-backup-row .small {
     line-height: 1.35;
 }

.about-app-page {
    width: 100%;
    padding-bottom: 1.5rem;
}

.about-app-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border: 1px solid rgba(30, 45, 61, 0.1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.about-app-hero-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.about-app-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about-app-logo {
    width: 82px;
    height: 52px;
    object-fit: contain;
}

.about-app-eyebrow,
.about-app-section-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-app-eyebrow {
    color: var(--perm-gold);
}

.about-app-title {
    margin: 0.15rem 0 0;
    color: var(--perm-navy);
    font-size: clamp(2rem, 1.7rem + 2vw, 3.25rem);
    font-weight: 850;
    letter-spacing: -0.04em;
}

.about-app-intro {
    max-width: 560px;
    margin: 1.75rem 0 0;
    color: #526176;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.16rem);
    line-height: 1.65;
}

.about-app-hero-mark {
    display: grid;
    place-items: center;
    align-self: center;
    width: clamp(90px, 15vw, 150px);
    height: clamp(90px, 15vw, 150px);
    flex: 0 0 auto;
    border: 1px solid rgba(30, 45, 61, 0.1);
    border-radius: 50%;
    background: rgba(30, 45, 61, 0.05);
    color: var(--perm-navy);
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    box-shadow: inset 0 0 0 14px rgba(181, 139, 58, 0.08);
}

.about-app-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.5rem;
}

.about-app-status span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid rgba(25, 135, 84, 0.16);
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.08);
    color: #27734d;
    font-size: 0.78rem;
    font-weight: 650;
}

.about-app-section {
    margin-top: 2rem;
}

.about-app-section-heading {
    max-width: 580px;
    margin-bottom: 1.25rem;
}

.about-app-section-eyebrow {
    color: var(--perm-gold);
}

.about-app-section-heading h2 {
    margin: 0.35rem 0 0;
    color: var(--perm-navy);
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.about-app-section-heading p {
    margin: 0.55rem 0 0;
    color: #64748b;
    line-height: 1.55;
}

.about-app-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.about-app-feature {
    min-height: 100%;
    padding: 1.25rem;
    border: 1px solid rgba(30, 45, 61, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.about-app-feature > i {
    display: inline-grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 1rem;
    border-radius: 0.8rem;
    background: rgba(181, 139, 58, 0.14);
    color: var(--perm-gold);
    font-size: 1.3rem;
}

.about-app-feature strong,
.about-app-feature span {
    display: block;
}

.about-app-feature strong {
    color: var(--perm-navy);
    font-size: 0.98rem;
}

.about-app-feature span {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.5;
}

.about-app-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.about-app-principle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.85rem;
    background: rgba(30, 45, 61, 0.05);
    color: #40536b;
    font-size: 0.82rem;
    font-weight: 700;
}

.about-app-principle i {
    color: var(--perm-gold);
    font-size: 1.05rem;
}

.about-app-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    color: #94a3b8;
    font-size: 0.78rem;
}

@media (max-width: 767px) {
    .about-app-hero {
        padding: 1.5rem;
    }

    .about-app-hero-mark {
        display: none;
    }

    .about-app-features,
    .about-app-principles {
        grid-template-columns: 1fr;
    }
}

 .welcome-empty-state {
     display: grid;
     place-items: center;
     min-height: min(62vh, 560px);
     padding: 2rem 1rem;
 }

 .welcome-empty-content {
     width: min(100%, 560px);
     padding: clamp(2rem, 5vw, 3.5rem);
     text-align: center;
     border: 1px solid rgba(30, 45, 61, 0.1);
     border-radius: 1.25rem;
     background: rgba(255, 255, 255, 0.86);
     box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
 }

 .welcome-empty-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 3.5rem;
     height: 3.5rem;
     margin-bottom: 1rem;
     border-radius: 1rem;
     background: rgba(181, 139, 58, 0.14);
     color: var(--perm-gold);
     font-size: 1.55rem;
 }

 .welcome-empty-eyebrow {
     display: block;
     color: var(--perm-gold);
     font-size: 0.72rem;
     font-weight: 800;
     letter-spacing: 0.1em;
     text-transform: uppercase;
 }

 .welcome-empty-content h2 {
     margin: 0.45rem 0 0.7rem;
     color: var(--perm-navy);
     font-size: clamp(1.45rem, 4vw, 2rem);
 }

 .welcome-empty-content p {
     margin: 0;
     color: #64748b;
     line-height: 1.55;
 }

 .welcome-empty-actions {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 0.65rem;
     margin-top: 1.5rem;
 }

 @media (max-width: 575px) {
     .settings-section-nav {
         display: flex;
         width: 100%;
     }

     .settings-nav-btn {
         flex: 1 1 0;
         justify-content: center;
         padding-inline: 0.45rem;
         font-size: 0.73rem;
     }

     .about-settings-hero {
         align-items: flex-start;
         flex-direction: column;
         gap: 0.75rem;
     }

     .about-settings-logo {
         width: 148px;
         height: 64px;
     }

     .about-settings-features {
         grid-template-columns: 1fr;
     }

     .about-settings-principles {
         grid-template-columns: 1fr;
     }

     .settings-backup-row {
         align-items: stretch;
         flex-direction: column;
     }

     .settings-backup-row .btn {
         width: 100%;
     }
 }

 .expense-attachment-item {
     box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
 }

 .expense-attachment-actions .btn {
     min-width: 0;
 }

 @media (max-width: 991px) {
     .report-header-row {
         flex-direction: column;
     }

     .report-actions {
         width: 100%;
     }

    .report-actions-main {
         justify-content: stretch;
            flex-wrap: wrap;
     }

    .report-inline-filters {
         grid-template-columns: 1fr;
        width: 100%;
     }

     .report-export-btn,
     .report-toggle {
         width: 100%;
     }

    .report-preview-iframe {
        height: 62vh;
        min-height: 420px;
    }

     .expenses-filters-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 575px) {
    .relatorio-tabela thead th {
        font-size: 0.7rem;
        padding: 0.58rem 0.36rem;
        white-space: nowrap;
        letter-spacing: 0;
    }

    .relatorio-tabela thead th:first-child {
        width: 44%;
    }

    .relatorio-tabela tbody td {
        font-size: 0.84rem;
        padding: 0.66rem 0.42rem;
    }

    .relatorio-tabela th:first-child,
    .relatorio-tabela td:first-child {
        padding-left: 0.6rem;
    }

    .relatorio-tabela th:last-child,
    .relatorio-tabela td:last-child {
        padding-right: 0.6rem;
    }

    .relatorio-tabela th:nth-child(3),
    .relatorio-tabela td:nth-child(3),
    .relatorio-tabela th:nth-child(4),
    .relatorio-tabela td:nth-child(4) {
        white-space: nowrap;
    }

     .doc-upload-shell {
         align-items: stretch;
     }

     .doc-upload-btn,
     .doc-upload-state {
         width: 100%;
     }

     .doc-upload-item {
         align-items: flex-start;
         flex-direction: column;
     }

     .doc-upload-item .btn {
         width: 100%;
     }

     .doc-actions-group .btn {
         width: 100%;
         min-width: 0;
     }

     .expense-attachment-actions .btn {
         width: 1.8rem;
         min-width: 0;
     }
 }

 @media (min-width: 992px) {
     .expenses-filters-card .card-body {
         padding: 1.4rem 1.45rem;
     }

     .expenses-filters-grid {
         align-items: end;
     }
 }

 blockquote,
 pre,
 code {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

 .bg-violet {
     background-color: #6f42c1 !important;
 }

 .bg-mustard {
     background-color: #d39e00 !important;
 }

 .category-dot {
     width: 14px;
     height: 14px;
     border-radius: 999px;
     flex: 0 0 14px;
     box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .category-dot-with-icon {
     width: 1.7rem;
     height: 1.7rem;
     flex-basis: 1.7rem;
     border: 2px solid rgba(255, 255, 255, 0.88);
     box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06);
 }

 .category-dot-with-icon i {
     color: #fff;
     font-size: 0.82rem;
     line-height: 1;
 }

 .category-management-card {
     border: 1px solid rgba(30, 45, 61, 0.08);
     border-radius: 1rem;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .category-management-card:hover {
     box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
 }

 .category-management-card,
 .category-management-card .card-body {
     overflow: visible;
 }

 .category-management-card .dropdown {
     position: relative;
     z-index: 5;
 }

 .category-management-card .dropdown-menu {
     z-index: 1200;
 }

 .category-management-card .card-body {
     padding-top: 0.9rem;
     padding-bottom: 0.9rem;
 }

 .category-dot-sm {
     width: 10px;
     height: 10px;
     flex-basis: 10px;
 }

 .category-color-input {
     width: 3.4rem;
     height: 3rem;
     padding: 0.2rem;
 }

 .area-category-chart {
     display: grid;
     gap: 0.8rem;
 }

 .area-chart-bar {
     display: flex;
     overflow: hidden;
     height: 14px;
     border-radius: 999px;
     background: rgba(15, 23, 42, 0.06);
 }

 .area-chart-segment {
     min-width: 4px;
 }

 .area-category-legend {
     display: grid;
     gap: 0.55rem;
 }

 .area-category-legend-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 0.75rem;
     font-size: 0.92rem;
 }

 .area-category-empty {
     font-size: 0.92rem;
     font-style: italic;
 }

 .more-layout-grid .card {
     overflow: visible;
 }

 .dropdown-menu {
     z-index: 1100;
 }

 .dropdown-menu .dropdown-item:disabled {
     opacity: 0.45;
 }

 .task-input-shell {
     background: linear-gradient(180deg, rgba(181, 139, 58, 0.08), rgba(255, 255, 255, 0.6));
     border: 1px solid rgba(181, 139, 58, 0.2);
     border-radius: 1.1rem;
     padding: 0.85rem;
 }

 .task-group-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.75rem;
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: #5c6c8a;
 }

 .task-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
     background: #fff;
     border: 1px solid rgba(30, 45, 61, 0.12);
     border-radius: 0.9rem;
     padding: 0.75rem 0.85rem;
     box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05);
 }

 .task-item-done {
     background: linear-gradient(180deg, rgba(25, 135, 84, 0.06), rgba(255, 255, 255, 0.96));
     border-color: rgba(25, 135, 84, 0.12);
 }

 .task-check-wrap {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
 }

 .task-actions .btn {
     width: 2.1rem;
     height: 2.1rem;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 0.7rem;
 }

 .task-text {
     word-break: break-word;
 }

 .task-item-done .task-text {
     color: #7a8699;
     text-decoration: line-through;
 }

 .task-empty-state,
 .task-empty-inline {
     display: flex;
     align-items: center;
     gap: 0.65rem;
     min-height: 56px;
     justify-content: center;
     text-align: center;
 }

 .task-empty-state i {
     font-size: 1.25rem;
     color: var(--perm-gold);
 }

 .expenses-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 0.9rem;
 }

 #listaDespesas {
     display: grid;
     gap: 0.75rem;
 }

 #listaDespesas .expense-card {
     margin: 0 !important;
     height: auto;
     align-self: start;
 }

 .expenses-grid {
     gap: 0.75rem;
     align-items: start;
 }

 .expenses-grid .expense-card {
     height: auto;
     margin-bottom: 0 !important;
 }

 .expense-card-body {
     align-items: flex-start;
     padding: 1rem 1.1rem;
 }

 .expense-card-info > strong:first-child {
     color: var(--perm-navy);
     font-size: 0.98rem;
 }

 .expense-card-info > small {
     display: inline-block;
     margin-top: 0.25rem;
     line-height: 1.35;
 }

 .expense-card-value > strong {
     color: var(--perm-navy);
     font-size: 0.98rem;
 }

 @media (max-width: 575px) {
     .expense-card-body {
         padding: 0.9rem;
     }
 }

 @media (max-width: 991px) {
     .dashboard-page {
         padding-bottom: 6.5rem;
     }

     .dashboard-column:last-child .dashboard-card:first-child .card-body {
         padding-bottom: 2rem;
     }
 }

 @media (min-width: 1200px) {
     .more-layout-grid .card-body {
         padding: 1.6rem;
     }

     .dashboard-grid {
         grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr);
     }

     .expenses-grid {
         grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
     }

     .dashboard-page #listaAreas {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .dashboard-total-card

 }

 @media (min-width: 1600px) {
     main#app,
     header .container {
         max-width: 1600px;
     }

     .dashboard-grid {
         grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
         gap: 1.5rem;
     }

     .dashboard-column {
         gap: 1.5rem;
     }

     .dashboard-page #listaAreas {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }

 .expenses-grid {
     display: grid;
     width: 100%;
     max-width: 100%;
     grid-template-columns: 1fr;
     gap: 0.75rem;
 }

 .expense-column {
     display: grid;
     align-content: start;
     gap: 0.75rem;
     min-width: 0;
 }

 .expenses-grid .expense-card {
     display: block;
     width: 100%;
     margin: 0 !important;
 }

 @media (min-width: 768px) {
     .expenses-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }

/* ==========================================================================
   TAREFAS & MATERIAIS — Layout e Cartões
   ========================================================================== */

.task-filters-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.task-filter-pills {
    display: inline-flex;
    background: rgba(30, 45, 61, 0.07);
    padding: 3px;
    border-radius: 10px;
    gap: 3px;
}

.task-filter-btn {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.32rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.task-filter-btn:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
}

.task-filter-btn.active {
    background: #ffffff;
    color: #b58b3a;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.task-filter-area-select {
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 8px;
    border-color: rgba(30, 45, 61, 0.15);
    background-color: #ffffff;
    color: #334155;
    min-width: 155px;
    padding: 0.3rem 0.6rem;
}

.task-input-shell {
    background: linear-gradient(180deg, rgba(181, 139, 58, 0.08), rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(181, 139, 58, 0.22);
    border-radius: 1.1rem;
    padding: 0.85rem;
}

.task-type-selector .btn {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.26rem 0.65rem;
    border-color: rgba(30, 45, 61, 0.15);
}

.task-type-selector .btn-check:checked + .btn {
    background-color: #b58b3a;
    border-color: #b58b3a;
    color: #ffffff;
}

.task-area-select-wrap .form-select,
.task-qty-wrap .form-control {
    font-size: 0.76rem;
    border-radius: 8px;
    border-color: rgba(30, 45, 61, 0.15);
}

.task-board {
    display: grid;
    gap: 1rem;
}

.task-group {
    background: rgba(248, 250, 252, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1rem;
    padding: 0.9rem;
}

.task-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5c6c8a;
}

.task-items {
    display: grid;
    gap: 0.65rem;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid rgba(30, 45, 61, 0.12);
    border-radius: 0.85rem;
    padding: 0.75rem 0.9rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.task-item-obra {
    border-left: 3.5px solid #3b82f6;
}

.task-item-compra {
    border-left: 3.5px solid #b58b3a;
}

.task-badges-row {
    line-height: 1;
}

.task-badge-type {
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
}

.badge-tipo-obra {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.badge-tipo-compra {
    background: rgba(181, 139, 58, 0.14);
    color: #926c1f;
    border: 1px solid rgba(181, 139, 58, 0.32);
}

.task-badge-area {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.15);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.task-badge-qty {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.task-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.task-actions .btn {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    font-size: 0.82rem;
}

.task-text {
    word-break: break-word;
    font-size: 0.88rem;
    font-weight: 500;
    color: #1e293b;
}

.task-item-done .task-text {
    color: #94a3b8;
    text-decoration: line-through;
}

.task-empty-state,
.task-empty-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-height: 56px;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
}

    @media (max-width: 767px) {
        .expenses-grid .expense-column {
            display: contents;
        }
    }

/* ==========================================================================
   FILTROS DO MODAL DE TAREFAS
   ========================================================================== */
.task-filter-pills {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    flex-wrap: wrap;
}

.task-filter-btn {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.task-filter-btn:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.06);
}

.task-filter-btn.active {
    background: #b58b3a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(181, 139, 58, 0.35);
}

/* ==========================================================================
   TAREFAS & MATERIAIS — DARK MODE OVERRIDES
   ========================================================================== */
[data-theme="dark"] .task-input-shell {
    background: linear-gradient(180deg, rgba(212, 163, 75, 0.1), rgba(10, 16, 23, 0.5)) !important;
    border-color: rgba(212, 163, 75, 0.25) !important;
}

[data-theme="dark"] .task-filter-pills {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .task-filter-btn {
    color: #94a3b8;
}

[data-theme="dark"] .task-filter-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .task-filter-btn.active {
    background: #b58b3a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .task-filter-area-select {
    background-color: #141f2d;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

[data-theme="dark"] .task-type-selector .btn {
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

[data-theme="dark"] .task-type-selector .btn-check:checked + .btn {
    background-color: #b58b3a;
    border-color: #b58b3a;
    color: #ffffff;
}

[data-theme="dark"] .task-area-select-wrap .form-select,
[data-theme="dark"] .task-qty-wrap .form-control {
    background-color: #141f2d;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

[data-theme="dark"] .task-group {
    background: rgba(15, 24, 36, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .task-group-header {
    color: #64748b !important;
}

[data-theme="dark"] .task-item {
    background: #141f2d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .task-text {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .task-item-done .task-text {
    color: #475569 !important;
}

[data-theme="dark"] .task-badge-area {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .task-actions .btn {
    background: #1a2738 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   GALERIA DE FOTOS DA ÁREA (Antes e Depois) & COMPARADOR - PerMaat Theme
   ========================================================================== */

#galeriaAreaModal .modal-dialog {
    max-height: 92vh;
}

#galeriaAreaModal .modal-content {
    max-height: 92vh;
}

#galeriaAreaModal .modal-body {
    padding: 1.25rem 1.5rem !important;
    overflow: hidden;
    min-height: 0;
}


.galeria-tab-content {
    height: 400px;
}

.galeria-tab-content > .tab-pane {
    height: 100%;
    overflow: hidden;
}

#painel-antes .row,
#painel-depois .row {
    height: 100%;
    margin: 0;
    align-items: stretch;
}

#painel-antes .col-lg-7,
#painel-depois .col-lg-7 {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-right: 0.75rem;
}

#painel-antes .col-lg-5,
#painel-depois .col-lg-5 {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-left: 0.75rem;
}

#painel-comparador {
    overflow: hidden;
}

#galeriaSliderSection {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#galeriaSliderContainer,
#galeriaLadoALadoContainer {
    flex: 1;
    min-height: 0;
}

#galeriaComparadorEmpty {
    flex: 1;
    min-height: 0;
    margin: 0;
}

.galeria-empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: 16px;
    border: 2px dashed var(--bs-border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.galeria-empty-state i {
    font-size: 2.8rem;
    margin-bottom: 0.85rem;
    color: #b58b3a;
    opacity: 0.85;
}

.galeria-empty-state p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.galeria-featured-container {
    background: #0b131e;
    border-radius: 16px;
    padding: 10px;
    border: 1px solid rgba(181, 139, 58, 0.28);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.galeria-featured-viewer {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 60%, #1e2d3d 0%, #080f18 100%);
}

.galeria-featured-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.3s ease, opacity 0.2s ease;
    border-radius: 6px;
}

.galeria-featured-img:hover {
    transform: scale(1.02);
}

.galeria-nav-tabs {
    border-bottom: none;
    background: var(--bs-tertiary-bg);
    padding: 6px;
    border-radius: 14px;
    display: inline-flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--bs-border-color);
}

.galeria-nav-tab {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 1.35rem;
    border-radius: 10px !important;
    color: var(--bs-secondary-color);
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.galeria-nav-tab:hover {
    color: var(--bs-body-color);
    background: rgba(255, 255, 255, 0.08);
}

.galeria-nav-tab.active {
    background: linear-gradient(135deg, #1e2d3d, #2e4257) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(30, 45, 61, 0.25);
}

.galeria-tab-count {
    background: rgba(181, 139, 58, 0.2);
    color: #b58b3a;
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
}

.galeria-nav-tab.active .galeria-tab-count {
    background: #b58b3a;
    color: #ffffff;
}

.galeria-upload-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.btn-galeria-upload {
    background: linear-gradient(135deg, #b58b3a, #966f28);
    color: #ffffff !important;
    border: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(181, 139, 58, 0.3);
    transition: all 0.2s ease;
}

.btn-galeria-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(181, 139, 58, 0.45);
}

.btn-galeria-camera {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-galeria-camera:hover {
    background: rgba(181, 139, 58, 0.15);
    color: #b58b3a;
    border-color: rgba(181, 139, 58, 0.4);
    transform: translateY(-2px);
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.65rem;
    padding: 0.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    align-content: start;
}

.galeria-thumbnail {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: var(--bs-tertiary-bg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.18s ease;
}

.galeria-thumbnail:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(30, 45, 61, 0.18);
    border-color: rgba(181, 139, 58, 0.5);
}

.galeria-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.galeria-thumbnail:hover img {
    transform: scale(1.07);
}

.galeria-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(30, 45, 61, 0.9) 0%, rgba(30, 45, 61, 0.2) 60%, rgba(30, 45, 61, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px;
}

.galeria-thumbnail:hover .galeria-thumbnail-overlay {
    opacity: 1;
}

.galeria-thumbnail-zoom-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.btn-galeria-delete {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.85);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-galeria-delete:hover {
    background: #dc3545;
    transform: scale(1.15);
}

.galeria-thumbnail-nome {
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.btn-galeria-area {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid rgba(30, 45, 61, 0.18);
    background: rgba(30, 45, 61, 0.06);
    color: #1e2d3d;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-galeria-area:hover {
    background: linear-gradient(135deg, #1e2d3d, #2e4257);
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 45, 61, 0.25);
}

.galeria-foto-count {
    background: #b58b3a;
    color: #ffffff;
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: 12px;
    font-weight: 700;
}

.btn-galeria-area:hover .galeria-foto-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.galeria-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(30, 45, 61, 0.75);
    color: #ffffff;
    border: 1px solid rgba(181, 139, 58, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.galeria-arrow-prev {
    left: 14px;
}

.galeria-arrow-next {
    right: 14px;
}

.galeria-nav-arrow:hover {
    background: #b58b3a;
    color: #ffffff;
    border-color: #b58b3a;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(181, 139, 58, 0.4);
}

.galeria-featured-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(30, 45, 61, 0.85);
    color: #b58b3a;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(181, 139, 58, 0.3);
}

.galeria-featured-caption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(15, 23, 42, 0.8);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.galeria-thumbnail.active-thumbnail {
    border-color: #b58b3a !important;
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.4), 0 6px 18px rgba(181, 139, 58, 0.2) !important;
    transform: scale(1.03);
}

.galeria-slider-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.comparador-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.85rem;
    background: #0b131e;
    border: 1px solid rgba(181, 139, 58, 0.28);
    border-radius: 12px;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.comparador-selector-group {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.comparador-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.28rem 0.65rem;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.comparador-badge.badge-antes {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.comparador-badge.badge-depois {
    background: rgba(181, 139, 58, 0.2);
    color: #f3d489;
    border: 1px solid rgba(181, 139, 58, 0.4);
}

.comparador-select {
    background: #142030;
    color: #e2e8f0;
    border: 1px solid rgba(181, 139, 58, 0.35);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.28rem 0.6rem;
    cursor: pointer;
    max-width: 170px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comparador-select:focus {
    border-color: #b58b3a;
    box-shadow: 0 0 0 2px rgba(181, 139, 58, 0.25);
}

.comparador-select option {
    background: #142030;
    color: #e2e8f0;
}

.comparador-actions-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comparador-btn-group {
    background: #142030;
    border-radius: 8px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-comparador {
    color: #94a3b8;
    border: none;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    background: transparent;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-comparador.active {
    background: #b58b3a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-comparador:hover:not(.active) {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

.btn-comparador-action {
    background: #142030;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.26rem 0.65rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.btn-comparador-action:hover {
    background: rgba(181, 139, 58, 0.22);
    color: #ffffff;
    border-color: #b58b3a;
}

.antes-depois-slider {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 14px;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(181, 139, 58, 0.25);
    background: radial-gradient(circle at 50% 50%, #162436 0%, #080f18 100%);
    cursor: ew-resize;
}

.slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: object-fit 0.2s ease;
}

.slider-img.fit-cover {
    object-fit: cover !important;
}

.slider-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    clip-path: inset(0 0 0 50%);
    -webkit-clip-path: inset(0 0 0 50%);
    pointer-events: none;
}

.slider-img-depois {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: object-fit 0.2s ease;
}

.slider-img-depois.fit-cover {
    object-fit: cover !important;
}

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 44px;
    margin-left: -22px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
}

.slider-handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #ffffff, #b58b3a, #ffffff);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), 0 0 12px rgba(181, 139, 58, 0.7);
}

.slider-handle-circle {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #1e2d3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(181, 139, 58, 0.35);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, box-shadow 0.2s ease;
}

.antes-depois-slider:hover .slider-handle-circle,
.antes-depois-slider:active .slider-handle-circle {
    transform: scale(1.15);
    background-color: #ffffff;
    color: #b58b3a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(181, 139, 58, 0.4);
}

.slider-label-before,
.slider-label-after {
    position: absolute;
    top: 12px;
    z-index: 5;
    background: rgba(10, 18, 30, 0.82);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(181, 139, 58, 0.35);
    pointer-events: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.slider-label-before {
    left: 12px;
}

.slider-label-after {
    right: 12px;
}

.galeria-lado-a-lado-container {
    display: flex;
    gap: 0.75rem;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.lado-item {
    flex: 1;
    min-width: 0;
    background: #0b131e;
    border: 1px solid rgba(181, 139, 58, 0.25);
    border-radius: 14px;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
}

.lado-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 3;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lado-antes .lado-badge {
    background: rgba(10, 18, 30, 0.82);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lado-depois .lado-badge {
    background: rgba(181, 139, 58, 0.3);
    color: #f3d489;
    border: 1px solid rgba(181, 139, 58, 0.5);
}

.lado-img-wrapper {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 50%, #162436 0%, #080f18 100%);
}

.lado-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    border-radius: 6px;
}

.lado-img:hover {
    transform: scale(1.02);
}

.lado-img.fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lado-caption {
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.5rem;
}

.lado-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lado-divider span {
    font-size: 0.7rem;
    font-weight: 800;
    color: #b58b3a;
    background: #0b131e;
    border: 1px solid rgba(181, 139, 58, 0.4);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .galeria-modal-header {
    background: linear-gradient(140deg, #15202b 0%, #1e2d3d 100%);
    border-bottom-color: rgba(181, 139, 58, 0.3);
}

[data-theme="dark"] .galeria-slider-section {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .galeria-empty-state {
    background-color: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-galeria-area {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .btn-galeria-area:hover {
    background: linear-gradient(135deg, #1e2d3d, #2e4257);
    color: #ffffff;
}

@media (max-width: 991px) {
    .galeria-tab-content {
        height: auto;
        min-height: 350px;
    }

    .galeria-tab-content > .tab-pane {
        height: auto;
        overflow: visible;
    }

    #painel-antes .row,
    #painel-depois .row {
        height: auto;
    }

    #painel-antes .col-lg-7,
    #painel-depois .col-lg-7,
    #painel-antes .col-lg-5,
    #painel-depois .col-lg-5 {
        height: auto;
        overflow: visible;
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }

    #galeriaSliderSection,
    .galeria-slider-section {
        height: auto;
    }

    .comparador-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.4rem 0.6rem;
    }

    .comparador-select {
        max-width: 130px;
    }

    .antes-depois-slider {
        height: 280px;
    }

    .galeria-lado-a-lado-container {
        flex-direction: column;
        height: auto;
        min-height: 360px;
    }

    .lado-item {
        min-height: 170px;
    }

    .galeria-featured-viewer {
        height: 250px;
    }

    .galeria-grid {
        max-height: 220px;
        overflow-y: auto;
    }
}

@media (max-width: 576px) {
    #galeriaAreaModal .modal-body {
        padding: 1rem 0.85rem !important;
    }
    .galeria-featured-viewer {
        height: 200px;
    }
    .antes-depois-slider {
        height: 220px;
    }
    .galeria-lado-a-lado-container {
        min-height: 320px;
    }
    .lado-item {
        min-height: 150px;
    }
    .comparador-select {
        max-width: 110px;
        font-size: 0.72rem;
    }
    .galeria-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 0.5rem;
    }
}

/* ==========================================================================
   GESTÃO DE GARANTIAS DE EQUIPAMENTOS
   ========================================================================== */

.expense-optional-badge {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.expense-warranty-panel {
    background: #f8fafc;
    /* Sem borda própria: o cartão da garantia já tem contorno;
       uma segunda borda aqui criava um formulário dentro do formulário. */
    border: 0;
    box-shadow: none;
}

/* Coluna interna do painel de garantia: empilha label, input e preview
   mantendo alturas iguais entre as duas colunas (align-items-stretch). */
.expense-warranty-col {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
}

.expense-warranty-col .expense-warranty-preview {
    margin-top: auto;
}

.btn-garantia-preset {
    background: rgba(30, 45, 61, 0.05);
    color: #475569;
    border: 1px solid rgba(30, 45, 61, 0.12);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-garantia-preset:hover {
    background: rgba(30, 45, 61, 0.1);
    color: var(--perm-navy);
}

.btn-garantia-preset.active {
    background: var(--perm-navy);
    color: #ffffff;
    border-color: var(--perm-navy);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}

/* Sino de Notificações (Dashboard, discreto no hero) */
.dashboard-notificacoes-wrap {
    position: relative;
    display: inline-flex;
}

.dashboard-notificacoes-sino {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(220, 53, 69, 0.35);
    background-color: rgba(220, 53, 69, 0.12);
    color: #dc3545;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(220, 53, 69, 0.15);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.dashboard-notificacoes-sino:hover,
.dashboard-notificacoes-sino.ativos {
    background-color: rgba(220, 53, 69, 0.22);
    transform: scale(1.06);
}

.dashboard-notificacoes-contador {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--bs-body-bg, #fff);
}

/* Animação de pulso desativada: o contador fica sempre estático.
@keyframes notificacaoPulso {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
}
*/

/* Contador estático (regra mantida por compatibilidade) */
.dashboard-notificacoes-sino--visto .dashboard-notificacoes-contador {
    animation: none;
}

.dashboard-notificacoes-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1050;
    display: none;
    min-width: 20rem;
    max-width: calc(100vw - 2rem);
    max-height: 24rem;
    overflow-y: auto;
    padding: 0;
    border-radius: 0.75rem;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid rgba(100, 116, 139, 0.15);
}

.dashboard-notificacoes-menu.aberto {
    display: block;
    overflow-x: hidden;
}

.dashboard-notificacoes-cabecalho {
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #dc3545;
    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
}

/* Feedback inline de uma ação rápida (substitui o cabeçalho durante ~2s) */
.dashboard-notificacoes-cabecalho--feedback {
    color: #198754;
    background-color: rgba(25, 135, 84, 0.1);
}

[data-theme="dark"] .dashboard-notificacoes-cabecalho--feedback {
    color: #75dfae;
    background-color: rgba(25, 135, 84, 0.2);
}

.dashboard-notificacoes-lista {
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
}

.dashboard-notificacao-grupo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.dashboard-notificacao-grupo:hover {
    background-color: rgba(100, 116, 139, 0.06);
}

.dashboard-notificacao-grupo .dashboard-notificacao-row {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.dashboard-notificacao-grupo--sub {
    padding-left: 0.5rem;
}

.dashboard-notificacao-grupo--sub .dashboard-notificacao-row {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dashboard-notificacao-sub-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #cbd5e1;
    flex-shrink: 0;
    margin-left: 0.35rem;
}

.dashboard-notificacao-acao-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    margin-right: 0.35rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(25, 135, 84, 0.35);
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    font-size: 0.95rem;
    line-height: 1;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.dashboard-notificacao-acao-btn:hover {
    background-color: #198754;
    color: #fff;
    transform: scale(1.06);
}

.dashboard-notificacao-mais {
    margin: 0.15rem 0 0.35rem 2.6rem;
    padding: 0.2rem 0.55rem;
    border: 0;
    border-radius: 999px;
    background-color: rgba(100, 116, 139, 0.1);
    color: var(--perm-navy);
    font-size: 0.76rem;
    font-weight: 600;
    align-self: flex-start;
    transition: background-color 0.15s ease;
}

.dashboard-notificacao-mais:hover {
    background-color: rgba(100, 116, 139, 0.2);
}

.dashboard-notificacao-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    text-align: start;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.dashboard-notificacao-row:hover {
    background-color: rgba(100, 116, 139, 0.08);
}

.dashboard-notificacao-row strong {
    color: var(--perm-navy);
    font-size: 0.9rem;
    min-width: 0;
}

.dashboard-notificacao-icone {
    font-size: 1.1rem;
    color: #dc3545;
    flex-shrink: 0;
}

.dashboard-notificacao-seta {
    color: #94a3b8;
    flex-shrink: 0;
}

[data-theme="dark"] .dashboard-notificacoes-sino {
    border-color: rgba(220, 53, 69, 0.4);
    background-color: rgba(220, 53, 69, 0.18);
}

[data-theme="dark"] .dashboard-notificacao-row strong {
    color: #e2e8f0;
}

[data-theme="dark"] .dashboard-notificacao-row:hover {
    background-color: rgba(148, 163, 184, 0.1);
}

[data-theme="dark"] .dashboard-notificacoes-cabecalho {
    border-bottom-color: rgba(148, 163, 184, 0.15);
}

.dashboard-card-destaque {
    animation: dashboardDestaque 2s ease;
}

@keyframes dashboardDestaque {
    0%, 60% {
        box-shadow: 0 0 0 3px rgba(30, 45, 61, 0.35);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(30, 45, 61, 0);
    }
}

/* Badges de Garantia nos Cartões de Despesas */
.badge-garantia-ativa {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.badge-garantia-alerta {
    background-color: rgba(245, 158, 11, 0.14) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.badge-garantia-expirada {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #64748b !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
    font-weight: 500;
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Dark mode overrides para Garantias */
[data-theme="dark"] .expense-optional-badge {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .expense-warranty-panel {
    background: #141f2d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .btn-garantia-preset {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .btn-garantia-preset:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

[data-theme="dark"] .btn-garantia-preset.active {
    background: var(--perm-navy) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .badge-garantia-ativa {
    background-color: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .badge-garantia-alerta {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

[data-theme="dark"] .badge-garantia-expirada {
    background-color: rgba(148, 163, 184, 0.12) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* ==========================================================================
   DITADO POR VOZ (MODAL & CAPSULA POPUP)
   ========================================================================== */

.btn-mic-modal {
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    font-size: 0.84rem;
    transition: all 0.25s ease;
    border: 1px solid rgba(30, 45, 61, 0.2);
    color: var(--perm-navy);
    background: transparent;
}

.btn-mic-modal:hover {
    background: rgba(30, 45, 61, 0.08);
    border-color: var(--perm-navy);
    color: var(--perm-navy);
}

.btn-mic-modal.listening {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    animation: micPulse 1.5s infinite;
}

.modal-mic-hint {
    display: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: #dc3545;
    white-space: nowrap;
}

.modal-mic-hint.visible {
    display: inline-block;
    animation: fadeIn 0.2s ease;
}

.fab-voice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.06);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.fab-voice-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.fab-voice-popover {
    position: fixed;
    bottom: 95px;
    left: 50%;
    transform: translateX(-50%) translateY(16px) scale(0.97);
    width: min(460px, calc(100% - 40px));
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.fab-voice-popover.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

.voice-capsule-body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 1px solid rgba(30, 45, 61, 0.1);
    border-radius: 999px;
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.14),
        0 1px 3px rgba(15, 23, 42, 0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.fab-voice-popover.is-listening .voice-capsule-body {
    border-color: rgba(220, 53, 69, 0.35);
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.16),
        0 1px 3px rgba(15, 23, 42, 0.06);
}

.btn-capsule-mic {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--perm-navy-2), var(--perm-navy));
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(30, 45, 61, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-capsule-mic:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(30, 45, 61, 0.28);
}

.btn-capsule-mic.listening {
    background: linear-gradient(145deg, #e04a5a, #d0313f);
    animation: micPulse 1.5s infinite;
}

@keyframes micPulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.capsule-wave-bars {
    display: none;
    position: absolute;
    bottom: 3px;
    gap: 2px;
}

.btn-capsule-mic.listening .capsule-wave-bars {
    display: flex;
}

.capsule-wave-bars span {
    width: 2px;
    height: 8px;
    background: #ffffff;
    border-radius: 1px;
    animation: waveBar 0.8s ease-in-out infinite alternate;
}

.capsule-wave-bars span:nth-child(2) {
    animation-delay: 0.2s;
    height: 12px;
}

.capsule-wave-bars span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes waveBar {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.2); }
}

.voice-capsule-info {
    flex: 1;
    min-width: 0;
}

.capsule-status-line {
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #64748b;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.capsule-status-line i {
    font-size: 0.9rem;
}

.fab-voice-popover.is-listening .capsule-status-line i {
    animation: capsuleSparkle 1.6s ease-in-out infinite;
}

@keyframes capsuleSparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.9); }
}

.capsule-text-preview {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--perm-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-placeholder {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
}

.capsule-speech-text {
    color: var(--perm-navy);
    font-weight: 600;
}

.voice-capsule-btns {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.btn-capsule-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-capsule-ok {
    background: var(--perm-gold);
    color: #ffffff;
}

.btn-capsule-ok:hover:not(:disabled) {
    background: #9d752c;
    transform: scale(1.06);
}

.btn-capsule-ok:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    transform: none;
}

.btn-capsule-close {
    background: rgba(30, 45, 61, 0.08);
    color: #64748b;
}

.btn-capsule-close:hover {
    background: rgba(30, 45, 61, 0.15);
    color: var(--perm-navy);
    transform: scale(1.08);
}

/* Botão "Ditar" no rodapé do modal de despesa */
.btn-ditar-footer {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    margin-right: auto;
    gap: 0.35rem;
    border-radius: 0.75rem;
    border-color: rgba(181, 139, 58, 0.45);
    color: var(--perm-gold);
    font-weight: 700;
    background: rgba(181, 139, 58, 0.08);
    transition: all 0.2s ease;
}

.btn-ditar-footer:hover,
.btn-ditar-footer:focus-visible {
    background: var(--perm-gold);
    border-color: var(--perm-gold);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(181, 139, 58, 0.32);
}

.btn-ditar-footer.listening {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
    animation: micPulse 1.5s infinite;
}

/* Dark mode overrides para Voz */
[data-theme="dark"] .btn-mic-modal {
    border-color: rgba(255, 255, 255, 0.2);
    color: #f8fafc;
}

[data-theme="dark"] .btn-mic-modal:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .voice-capsule-body {
    background: #172232 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .fab-voice-popover.is-listening .voice-capsule-body {
    border-color: rgba(220, 53, 69, 0.4) !important;
}

[data-theme="dark"] .btn-ditar-footer {
    border-color: rgba(241, 199, 117, 0.4);
    color: #f1c775;
    background: rgba(181, 139, 58, 0.12);
}

[data-theme="dark"] .btn-ditar-footer:hover,
[data-theme="dark"] .btn-ditar-footer:focus-visible {
    background: var(--perm-gold);
    border-color: var(--perm-gold);
    color: #ffffff;
}

[data-theme="dark"] .capsule-text-preview,
[data-theme="dark"] .capsule-speech-text {
    color: #f8fafc !important;
}

[data-theme="dark"] .btn-capsule-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-capsule-close:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   LEITURA AUTOMÁTICA DE FATURAS (OCR / QR AT / PDF)
   ========================================================================== */

.ocr-status-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.ocr-loading-badge {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--perm-navy);
}

.ocr-success-badge {
    padding: 0.65rem 0.9rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #065f46;
}

.ocr-info-badge {
    padding: 0.55rem 0.85rem;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.18);
    border-radius: 10px;
    font-size: 0.82rem;
}

[data-theme="dark"] .ocr-loading-badge {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

[data-theme="dark"] .ocr-success-badge {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

[data-theme="dark"] .ocr-info-badge {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
}

/* ==========================================================================
   FILTROS RÁPIDOS (CHIPS) & PAINEL DE FILTROS - Despesas
   ========================================================================== */

/* Filters shell card */
.expenses-filters-card {
    border-radius: 1.1rem;
    border: 1px solid rgba(30, 45, 61, 0.09);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.filters-head-row .filters-toggle-btn {
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Filters grid */
.expenses-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    align-items: end;
}

.expense-value-range-field {
    grid-column: auto;
}

.filters-panel .form-select,
.filters-panel .form-control {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    border-radius: 0.85rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Value / Date range slider */
.expense-value-range {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.expense-value-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.expense-value-range-control {
    position: relative;
    height: 28px;
}

.expense-value-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(30, 45, 61, 0.1);
    transform: translateY(-50%);
}

.expense-value-range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    background: var(--perm-navy);
    transform: translateY(-50%);
    pointer-events: none;
}

.expense-value-range-control input[type="range"] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    transform: translateY(-50%);
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: auto;
}

.expense-value-range-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--perm-navy);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(30, 45, 61, 0.25);
    cursor: pointer;
}

.expense-value-range-control input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--perm-navy);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(30, 45, 61, 0.25);
    cursor: pointer;
}

[data-theme="dark"] .expenses-filters-card {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .filters-panel {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .expense-value-range-track {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .expense-value-range-fill {
    background: var(--perm-gold);
}

[data-theme="dark"] .expense-value-range-control input[type="range"]::-webkit-slider-thumb {
    background: var(--perm-gold);
    border-color: #1e2d3d;
}

[data-theme="dark"] .expense-value-range-control input[type="range"]::-moz-range-thumb {
    background: var(--perm-gold);
    border-color: #1e2d3d;
}

/* ==========================================================================
   ABA PROJETOS — Filtros, Grid e Cartões
   ========================================================================== */

/* ---- Filters shell (shared with expenses) ---- */
.projects-filters-shell {
    display: block;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.95));
    border: 1px solid rgba(30, 45, 61, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.projects-filters-shell.is-open {
    border-color: rgba(30, 45, 61, 0.2);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    background: #fff;
}

.projects-filters-head-row .btn {
    border-radius: 999px;
    padding: 0.42rem 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.projects-filters-panel {
    border-top: 1px dashed rgba(30, 45, 61, 0.15);
    padding-top: 0.85rem;
}

/* ---- Filters grid ---- */
@media (max-width: 768px) {
    .projects-filters-grid {
        grid-template-columns: 1fr;
    }
}

.projects-filters-panel .form-select,
.projects-filters-panel .form-control {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    border-radius: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---- Projects grid ---- */
/* Grid de projetos — fonte única, mobile-first.
   1 coluna até 991px (as 3 caixinhas cabem à vontade em horizontal);
   a partir de 992px: 2 colunas só quando cada card tem >=560px,
   largura suficiente para as 3 caixinhas lado a lado. */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.projects-grid .card {
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
        gap: 1.25rem;
    }
}

/* ---- Project card ---- */
.project-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius-project, 1.35rem);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Acento de estado: barra à esquerda via ::before.
       A barra é uma "borda" curva: acompanha o arredondado dos cantos e
       afina naturalmente até desaparecer no fim da curva. */
    --acento-estado: var(--estado-arquivado, #64748b);
    --acento-largura: 9px;
}

.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-left: var(--acento-largura) solid var(--acento-estado);
    pointer-events: none;
    z-index: 1;
}

.project-card.estado-em-curso { --acento-estado: var(--estado-em-curso); }
.project-card.estado-pendente { --acento-estado: var(--estado-pendente); }
.project-card.estado-em-pausa { --acento-estado: var(--estado-em-pausa); }
.project-card.estado-concluido { --acento-estado: var(--estado-concluido); }
.project-card.estado-cancelado { --acento-estado: var(--estado-cancelado); }
.project-card.estado-arquivado { --acento-estado: var(--estado-arquivado); }

/* Badge de estado do card — pill suave na mesma paleta dos chips do modal */
.app-status-badge[class*="badge-estado-"] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    vertical-align: middle;
}

.badge-estado-em-curso { background: color-mix(in srgb, var(--estado-em-curso) 12%, transparent); color: var(--estado-em-curso); }
.badge-estado-pendente { background: color-mix(in srgb, var(--estado-pendente) 12%, transparent); color: color-mix(in srgb, var(--estado-pendente) 80%, black); }
.badge-estado-em-pausa { background: color-mix(in srgb, var(--estado-em-pausa) 12%, transparent); color: color-mix(in srgb, var(--estado-em-pausa) 75%, black); }
.badge-estado-concluido { background: color-mix(in srgb, var(--estado-concluido) 12%, transparent); color: var(--estado-concluido); }
.badge-estado-cancelado { background: color-mix(in srgb, var(--estado-cancelado) 12%, transparent); color: var(--estado-cancelado); }
.badge-estado-arquivado { background: color-mix(in srgb, var(--estado-arquivado) 12%, transparent); color: var(--estado-arquivado); }

[data-theme="dark"] .badge-estado-em-curso,
[data-theme="dark"] .badge-estado-concluido,
[data-theme="dark"] .badge-estado-cancelado { color: color-mix(in srgb, currentColor 70%, white); }

[data-theme="dark"] .badge-estado-em-curso { color: #4ade80; }
[data-theme="dark"] .badge-estado-pendente { color: #fbbf24; }
[data-theme="dark"] .badge-estado-em-pausa { color: #d9a84e; }
[data-theme="dark"] .badge-estado-concluido { color: #60a5fa; }
[data-theme="dark"] .badge-estado-cancelado { color: #f87171; }
[data-theme="dark"] .badge-estado-arquivado { color: #94a3b8; }

[data-theme="dark"] [class*="badge-estado-"] { background: rgba(255, 255, 255, 0.07); }

/* Barra de progresso de tarefas no card */
/* Contagem integrada: discreta, a % ao lado da barra */
.project-card-progresso .d-flex {
    gap: 0.5rem;
}

.project-card-progresso span {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.project-card-progresso strong {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.project-card-progresso-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(30, 45, 61, 0.09);
    overflow: hidden;
}

.project-card-progresso-fill {
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
    transition: width 0.3s ease;
}

/* A cor de preenchimento acompanha o estado do projeto */
.project-card.estado-pendente .project-card-progresso-fill { background: var(--estado-pendente); }
.project-card.estado-em-pausa .project-card-progresso-fill { background: var(--estado-em-pausa); }
.project-card.estado-concluido .project-card-progresso-fill { background: var(--estado-concluido); }
.project-card.estado-cancelado .project-card-progresso-fill { background: var(--estado-cancelado); }
.project-card.estado-arquivado .project-card-progresso-fill { background: var(--estado-arquivado); }

[data-theme="dark"] .project-card-progresso-track {
    background: rgba(255, 255, 255, 0.1);
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1) !important;
}

.project-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.project-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.project-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    color: var(--perm-navy);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.15s ease;
}

.project-card-title:hover {
    color: var(--perm-gold);
}

.project-card-actions {
    flex-shrink: 0;
}

/* ---- Stats row ---- */
/* O estilo das caixinhas está definido na secção mobile (grid + gap + caixa). */

/* ---- Details row ---- */
/* Datas de início/conclusão: linha discreta no fundo do card */
.project-card-details {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    font-size: 0.79rem;
    color: #64748b;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(30, 45, 61, 0.06);
}

/* ---- Note ---- */
.project-card-note {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Quick actions removidas do card (ações ficam no menu ⋯) ---- */

/* ---- Empty state ---- */
.projects-empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #94a3b8;
}

.projects-empty-state i {
    font-size: 2.8rem;
    margin-bottom: 0.75rem;
    display: block;
    opacity: 0.45;
}

.projects-empty-state p {
    font-size: 0.95rem;
}

/* ---- Dark mode ---- */
[data-theme="dark"] .projects-filters-shell {
    background: rgba(30, 45, 61, 0.35);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .projects-filters-shell.is-open {
    background: rgba(30, 45, 61, 0.5);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .projects-filters-panel {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .project-card-title {
    color: #f1f5f9;
}

[data-theme="dark"] .project-card-title:hover {
    color: var(--perm-gold);
}

[data-theme="dark"] .project-card-stats span {
    color: #64748b;
}

[data-theme="dark"] .project-card-stats strong {
    color: #e2e8f0;
}

[data-theme="dark"] .project-card-details {
    color: #94a3b8;
}

[data-theme="dark"] .project-card-note {
    color: #94a3b8;
}

[data-theme="dark"] .project-card-progresso span {
    color: #64748b;
}

[data-theme="dark"] .project-card-progresso strong {
    color: #94a3b8;
}

[data-theme="dark"] .project-card-stats > div { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .project-card-details { border-top-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .project-card-stats strong small { color: #94a3b8; }

[data-theme="dark"] .projects-empty-state {
    color: #475569;
}

/* ==========================================================================
   APP SHELL & SIDEBAR NAVIGATION (Desktop + Mobile Drawer + Bottom Bar)
   ========================================================================== */

:root {
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --sidebar-bg: #0f1b2d;
    --sidebar-text: #c8d3e0;
    --sidebar-text-muted: #5a6a80;
    --sidebar-item-hover: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: rgba(201, 151, 59, 0.14);
    --sidebar-item-active-color: #e0aa4a;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   DARK THEME — BASE (fundo, cartões, texto, formulários)
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    /* Tokens do projeto */
    --perm-navy: #14202e;
    --perm-navy-2: #1e2d3d;
    --perm-navy-soft: rgba(230, 237, 245, 0.08);
    --perm-gold-soft: rgba(224, 170, 74, 0.16);

    /* Bootstrap */
    --bs-body-bg: #101a26;
    --bs-body-color: #e6edf5;
    --bs-emphasis-color: #f4f7fb;
    --bs-secondary-color: #9fb0c3;
    --bs-tertiary-bg: #18242f;
    --bs-secondary-bg: #1c2a3a;
    --bs-card-bg: #16222f;
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-heading-color: #f4f7fb;
    --bs-link-color: #e0aa4a;
    --bs-link-hover-color: #f0c069;
    --bs-modal-bg: #16222f;
    --bs-body-tertiary-bg: #18242f;
    --bs-secondary-text: #9fb0c3;

    /* Sidebar */
    --sidebar-bg: #142236;
    --sidebar-text: #c8d3e0;
    --sidebar-text-muted: #6b7d97;
}

[data-theme="dark"] body,
[data-theme="dark"] .app-content,
[data-theme="dark"] .app-main,
[data-theme="dark"] main {
    background: radial-gradient(circle at top left, rgba(224, 170, 74, 0.06), transparent 35%),
        radial-gradient(circle at bottom right, rgba(46, 66, 87, 0.35), transparent 40%),
        #101a26;
    color: #e6edf5;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .toast,
[data-theme="dark"] .popover,
[data-theme="dark"] .tooltip-inner,
[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .alert,
[data-theme="dark"] .badge,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .page-link {
    background-color: #16222f;
    color: #e6edf5;
}

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .page-link {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .accordion-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .table thead th {
    background-color: #18242f;
    color: #f4f7fb;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select:invalid,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-body-secondary {
    color: #9fb0c3;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #18242f;
    color: #e6edf5;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #1c2a3a;
    color: #f4f7fb;
    border-color: var(--perm-gold);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #e0aa4a;
}

[data-theme="dark"] ::-webkit-scrollbar {
    background: #101a26;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2e4257;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#appShell {
    display: flex;
    flex-direction: row;
    height: 100dvh;
    height: 100vh;
    /* NOTA: NÃO usar 100vw aqui — em Windows o 100vw inclui a largura da
       scrollbar vertical, o que cria um gap morto à direita do ecrã.
       100% respeita o viewport real disponível. */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* ---- SIDEBAR BASE ---- */
.sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    height: 100dvh;
    height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow: hidden;
    transition: width var(--sidebar-transition), min-width var(--sidebar-transition), max-width var(--sidebar-transition);
    z-index: 100;
    flex-shrink: 0;
}

/* SIDEBAR HEADER */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.9rem;
    min-height: 56px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    gap: 0.4rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.25rem 0.35rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    min-width: 0;
    flex: 1;
    overflow: visible;
}

.sidebar-brand:hover {
    background: var(--sidebar-item-hover);
}

.sidebar-brand .sidebar-logo-full {
    display: block;
    height: auto;
    max-height: 26px;
    width: 100%;
    max-width: 175px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

.sidebar-brand .sidebar-logo-icon {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
}

.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--sidebar-text-muted);
    font-size: 1.15rem;
    padding: 0.35rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-toggle-btn:hover {
    color: var(--sidebar-text);
    background: var(--sidebar-item-hover);
}

/* SIDEBAR PROJECT BADGE */
.sidebar-project-badge {
    display: flex;
    align-items: center;
    padding: 0.45rem 1rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sidebar-text-muted);
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-project-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SIDEBAR NAV */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
}

.sidebar-group-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sidebar-text-muted);
    padding: 0.35rem 0.5rem 0.2rem;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    position: relative;
    width: 100%;
}

.sidebar-item i {
    font-size: 1.15rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    line-height: 1;
}

.sidebar-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-item:hover {
    background: var(--sidebar-item-hover);
    color: #fff;
}

.sidebar-item.active {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-item-active-color);
    font-weight: 600;
}

.sidebar-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sidebar-item-active-color);
}

.sidebar-item.active i {
    color: var(--sidebar-item-active-color);
}

/* SIDEBAR FOOTER (FAB / CTA) */
.sidebar-footer {
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #2e445e 0%, #1e2d3d 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.sidebar-cta:hover {
    background: linear-gradient(135deg, #375375 0%, #25374c 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45);
    transform: translateY(-1px);
}

.sidebar-cta:active,
.sidebar-cta.fab-holding {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
}

.sidebar-cta i {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.sidebar-cta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tooltip "Soltar para voz" — oculto por padrão, só surge durante o hold */
.fab-hold-tip {
    display: none !important;
}

.sidebar-cta.fab-holding .fab-hold-tip,
.fab-holding .fab-hold-tip {
    display: block !important;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 27, 45, 0.96);
    color: #ffffff;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    border: 1px solid rgba(181, 139, 58, 0.4);
}

/* ---- SIDEBAR COLLAPSED (Desktop) ---- */
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    max-width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-header {
    padding: 0.6rem 0.35rem;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.35rem;
    height: auto;
    min-height: 56px;
}

.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    flex: none;
}

.sidebar.collapsed .sidebar-brand .sidebar-logo-full {
    display: none !important;
}

.sidebar.collapsed .sidebar-brand .sidebar-logo-icon {
    display: block !important;
    width: 38px;
    height: 38px;
}

.sidebar.collapsed .sidebar-toggle-btn {
    display: flex;
    width: 32px;
    height: 28px;
    margin: 0 auto;
    flex: none;
}

.sidebar.collapsed .sidebar-toggle-btn i {
    transform: scaleX(-1);
}

.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-group-label,
.sidebar.collapsed .sidebar-item span,
.sidebar.collapsed .sidebar-project-badge {
    display: none !important;
}

.sidebar.collapsed .sidebar-item {
    justify-content: center;
    padding: 0.6rem 0.25rem;
    gap: 0;
}

.sidebar.collapsed .sidebar-group {
    padding: 0 0.35rem;
}

.sidebar.collapsed .sidebar-footer {
    padding: 0.75rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar.collapsed .sidebar-cta {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.4);
}

.sidebar.collapsed .sidebar-cta span {
    display: none !important;
}

.sidebar.collapsed .sidebar-cta i {
    font-size: 1.25rem;
    line-height: 1;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- APP CONTENT (Desktop) ---- */
.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    /* scroll em todas as páginas, mesmo sem conteúdo, para nada se deslocar
       entre navegações (scrollbar-gutter stable mantém o espaço reservado). */
    scrollbar-gutter: stable;
    min-width: 0;
    max-width: 100%;
    height: 100%;
}
#app {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    /* NOTA: o scroll vive no .app-content (largura total do ecrã).
       Se o #app fosse o elemento com scroll, a barra ficaria colada
       ao limite do max-width (ex.: 1600px) em vez do borda da janela,
       criando um gap entre a scrollbar e o fim do browser. */
}

/* Desktop default: hide mobile bottom bar & overlay */
.mobile-bottom-bar {
    display: none !important;
}

.sidebar-overlay {
    display: none;
}

/* ==========================================================================
   MOBILE LAYOUT (< 768px) — Full width screen + Drawer + Bottom Navigation Bar
   ========================================================================== */
@media (max-width: 767.98px) {
    #appShell {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    /* Sidebar becomes a sliding drawer */
    .sidebar,
    .sidebar.collapsed {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        height: 100vh !important;
        width: min(84vw, 280px) !important;
        min-width: min(84vw, 280px) !important;
        max-width: min(84vw, 280px) !important;
        transform: translateX(-105%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1060 !important;
        box-shadow: none !important;
    }

    .sidebar.mobile-open,
    .sidebar.collapsed.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.5) !important;
    }

    .sidebar .sidebar-header,
    .sidebar.collapsed .sidebar-header {
        display: flex !important;
        padding: 0.85rem 1rem !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .sidebar .sidebar-brand,
    .sidebar.collapsed .sidebar-brand {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0.25rem 0.35rem !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .sidebar .sidebar-brand .sidebar-logo-full,
    .sidebar.collapsed .sidebar-brand .sidebar-logo-full {
        display: block !important;
        height: auto !important;
        max-height: 26px !important;
        width: 100% !important;
        max-width: 155px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .sidebar .sidebar-brand .sidebar-logo-icon,
    .sidebar.collapsed .sidebar-brand .sidebar-logo-icon {
        display: none !important;
    }

    .sidebar .sidebar-toggle-btn,
    .sidebar.collapsed .sidebar-toggle-btn {
        display: flex !important;
        width: auto !important;
        height: auto !important;
    }

    .sidebar .sidebar-group-label,
    .sidebar.collapsed .sidebar-group-label {
        display: block !important;
        opacity: 0.85 !important;
    }

    .sidebar .sidebar-item span,
    .sidebar.collapsed .sidebar-item span {
        display: inline !important;
        opacity: 1 !important;
    }

    .sidebar .sidebar-project-badge,
    .sidebar.collapsed .sidebar-project-badge {
        display: flex !important;
    }

    .sidebar .sidebar-item,
    .sidebar.collapsed .sidebar-item {
        display: flex !important;
        justify-content: flex-start !important;
        padding: 0.65rem 0.85rem !important;
        gap: 0.75rem !important;
        color: var(--sidebar-text) !important;
    }

    .sidebar .sidebar-item i,
    .sidebar.collapsed .sidebar-item i {
        display: inline-block !important;
        font-size: 1.15rem !important;
    }

    .sidebar .sidebar-group,
    .sidebar.collapsed .sidebar-group {
        display: flex !important;
        padding: 0 0.5rem !important;
    }

    /* No mobile drawer, ocultar o botão de rodapé pois já está na barra inferior */
    .sidebar .sidebar-footer,
    .sidebar.collapsed .sidebar-footer {
        display: none !important;
    }

    /* Backdrop overlay */
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1050;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* App content takes 100% width of screen */
    .app-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        /* Scroll vertical tem de viver aqui no mobile — o #app tem
           overflow-y: hidden e sem isto a página não desliza. */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    #app {
        flex: 1;
        min-height: 0;
        /* O scroll tem de viver aqui no mobile: o #app é quem contém o
           conteúdo das páginas; com overflow hidden nada desliza. */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0.85rem !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Bottom Navigation Bar */
    .mobile-bottom-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        padding: 0 1.25rem;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: linear-gradient(180deg, rgba(26, 40, 56, 0.98), rgba(15, 27, 45, 0.98));
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
        z-index: 1040;
    }

    .mobile-bottom-bar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        color: #fff;
        border-radius: 50%;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .mobile-bottom-bar-btn:active {
        background: rgba(255, 255, 255, 0.16);
        transform: scale(0.94);
    }

    .mobile-bottom-bar-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        border-radius: 8px;
    }

    .mobile-bottom-logo {
        height: 30px;
        width: auto;
        max-width: 135px;
        object-fit: contain;
    }

    .mobile-bottom-bar-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, #2e445e 0%, #1e2d3d 100%);
        border: none;
        color: #fff;
        border-radius: 50%;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        transition: all 0.15s ease;
    }

    .mobile-bottom-bar-cta:active {
        background: linear-gradient(135deg, #24374d 0%, #16222f 100%);
        transform: scale(0.94);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    /* Posição da barra: Em baixo (padrão) */
    [data-mobile-nav="bottom"] .mobile-bottom-bar,
    .mobile-bottom-bar {
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25) !important;
        padding-top: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        height: 60px !important;
    }

    [data-mobile-nav="bottom"] #app,
    #app {
        padding-top: 1rem !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Posição da barra: Ilha Flutuante (Em baixo) */
    [data-mobile-nav="island"] .mobile-bottom-bar {
        top: auto !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        left: 14px !important;
        right: 14px !important;
        width: calc(100% - 28px) !important;
        max-width: 440px !important;
        margin: 0 auto !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38) !important;
        padding: 0 1.25rem !important;
        height: 56px !important;
        background: linear-gradient(180deg, rgba(26, 40, 56, 0.94), rgba(15, 27, 45, 0.94)) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    [data-mobile-nav="island"] #app {
        padding-top: 1rem !important;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Posição da barra: Em cima */
    [data-mobile-nav="top"] .mobile-bottom-bar {
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        padding-bottom: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        height: calc(60px + env(safe-area-inset-top, 0px)) !important;
    }

    [data-mobile-nav="top"] #app {
        padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Dark mode bottom bar */
[data-theme="dark"] .mobile-bottom-bar {
    background: linear-gradient(180deg, rgba(18, 28, 44, 0.98), rgba(10, 18, 30, 0.98));
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   MENU DA APARÊNCIA / SELEÇÃO DE TEMA E POSIÇÃO DA BARRA
   ========================================================================== */

.theme-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.theme-option-card {
    background: #ffffff;
    border: 2px solid rgba(30, 45, 61, 0.1);
    border-radius: 1rem;
    padding: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    outline: none;
    width: 100%;
}

.theme-option-card:hover {
    border-color: rgba(181, 139, 58, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.theme-option-card.active,
.theme-option-card[aria-checked="true"] {
    border-color: var(--perm-gold);
    background: rgba(181, 139, 58, 0.04);
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.2);
}

.theme-option-card .theme-check-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-option-card.active .theme-check-icon,
.theme-option-card[aria-checked="true"] .theme-check-icon {
    opacity: 1;
    transform: scale(1);
}

/* Previews de Tema */
.theme-option-preview {
    width: 100%;
    height: 60px;
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid rgba(30, 45, 61, 0.1);
    display: flex;
    flex-direction: column;
}

.theme-preview-light {
    background: #f8fafc;
}
.theme-preview-light .theme-preview-header {
    height: 14px;
    background: #1e2d3d;
}
.theme-preview-light .theme-preview-body {
    flex: 1;
    background: #f8fafc;
    margin: 4px;
    border-radius: 3px;
    border: 1px dashed rgba(30, 45, 61, 0.15);
}

.theme-preview-dark {
    background: #0f172a;
}
.theme-preview-dark .theme-preview-header {
    height: 14px;
    background: #1e293b;
}
.theme-preview-dark .theme-preview-body {
    flex: 1;
    background: #0f172a;
    margin: 4px;
    border-radius: 3px;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

.theme-preview-auto {
    display: flex;
    flex-direction: row;
}
.theme-preview-half-light {
    flex: 1;
    background: #f8fafc;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.theme-preview-half-dark {
    flex: 1;
    background: #0f172a;
}

/* Previews da Posição da Barra Mobile */
.nav-preview-bottom {
    background: #f1f5f9;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nav-preview-bottom .nav-preview-content {
    flex: 1;
    margin: 5px;
    border-radius: 3px;
    border: 1px dashed rgba(30, 45, 61, 0.15);
}
.nav-preview-bottom .nav-preview-bar-bottom {
    height: 12px;
    background: #1e2d3d;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 12px;
    gap: 4px;
}
.nav-preview-bottom .nav-preview-bar-bottom span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: block;
}

.nav-preview-island {
    background: #f1f5f9;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 4px;
}
.nav-preview-island .nav-preview-content {
    flex: 1;
    margin: 4px;
    border-radius: 3px;
    border: 1px dashed rgba(30, 45, 61, 0.15);
}
.nav-preview-island .nav-preview-bar-island {
    height: 10px;
    background: #1e2d3d;
    border-radius: 999px;
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.nav-preview-island .nav-preview-bar-island span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: block;
}

.nav-preview-top {
    background: #f1f5f9;
    position: relative;
    display: flex;
    flex-direction: column;
}
.nav-preview-top .nav-preview-bar-top {
    height: 12px;
    background: #1e2d3d;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 12px;
    gap: 4px;
}
.nav-preview-top .nav-preview-bar-top span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    display: block;
}
.nav-preview-top .nav-preview-content {
    flex: 1;
    margin: 5px;
    border-radius: 3px;
    border: 1px dashed rgba(30, 45, 61, 0.15);
}

/* Dark mode option cards */
[data-theme="dark"] .theme-option-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}
[data-theme="dark"] .theme-option-card:hover {
    border-color: var(--perm-gold);
}
[data-theme="dark"] .theme-option-card.active,
[data-theme="dark"] .theme-option-card[aria-checked="true"] {
    border-color: var(--perm-gold);
    background: rgba(181, 139, 58, 0.1);
}
[data-theme="dark"] .nav-preview-bottom,
[data-theme="dark"] .nav-preview-island,
[data-theme="dark"] .nav-preview-top {
    background: #0f172a;
}

/* ==========================================================================
   ÁREAS TAB & DASHBOARD SUMMARY STYLES
   ========================================================================== */

.areas-page {
    animation: fadeInPage 0.2s ease-out;
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.areas-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* igual às restantes páginas: o sino fica sempre à mesma altura */
    flex-wrap: wrap;
    gap: 1rem;
}

.areas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: #ffffff;
    padding: 0.85rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid rgba(30, 45, 61, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.areas-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.areas-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 0.9rem;
}

.areas-search-input {
    padding-left: 2.25rem !important;
    border-radius: 0.65rem;
    border: 1px solid rgba(30, 45, 61, 0.12);
    font-size: 0.88rem;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.areas-search-input:focus {
    background-color: #ffffff;
    border-color: var(--perm-navy);
    box-shadow: 0 0 0 3px rgba(30, 45, 61, 0.12);
}

.areas-stat-pill {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid rgba(30, 45, 61, 0.08);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #475569;
}

.areas-stat-pill strong {
    color: var(--perm-navy);
    margin-right: 0.25rem;
}

.areas-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.25rem;
}

@media (max-width: 575px) {
    .areas-cards-grid {
        grid-template-columns: 1fr;
    }
}

.area-page-card {
    border-radius: 1rem;
    border: 1px solid rgba(30, 45, 61, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #ffffff;
    overflow: hidden;
}

.area-page-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(30, 45, 61, 0.15);
}

.area-page-card .card-body {
    padding: 1.25rem;
}

.area-card-tasks-alert {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.78rem;
}

.area-thumb-item {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 0.45rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.area-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.area-thumb-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    font-size: 0.55rem;
    text-align: center;
    padding: 1px 0;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
}

/* Photo strip nos cartões de área */
.area-card-photo-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #f8fafc;
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-radius: 0.65rem;
    padding: 0.5rem 0.65rem;
}

.area-card-photo-thumbs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}

.area-thumb-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.area-thumb-clickable:hover {
    transform: scale(1.06);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
}

.area-card-see-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    border: 1px solid rgba(30, 45, 61, 0.12);
    background: #ffffff;
    color: var(--perm-navy, #1e2d3d);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 2rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.area-card-see-all-btn:hover {
    background: #eef2f6;
    border-color: var(--perm-navy, #1e2d3d);
    color: var(--perm-navy, #1e2d3d);
    transform: none;
    box-shadow: none;
}
.area-card-see-all-btn .galeria-foto-count {
    color: #ffffff;
}

.area-card-add-photos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    border: 1px dashed rgba(30, 45, 61, 0.25);
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.area-card-add-photos-btn:hover {
    background: #eef2f6;
    color: var(--perm-navy, #1e2d3d);
    border-color: var(--perm-navy, #1e2d3d);
}

/* Tema escuro: photo strip dos cartões de área legível */
[data-theme="dark"] .area-card-photo-strip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .area-card-see-all-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e2e8f0;
}

[data-theme="dark"] .area-card-see-all-btn:hover {
    background: linear-gradient(135deg, #1e2d3d, #2e4257);
    border-color: #b58b3a;
    color: #ffffff;
}

[data-theme="dark"] .area-card-add-photos-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.2);
    color: #94a3b8;
}

[data-theme="dark"] .area-card-add-photos-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #b58b3a;
    color: #ffffff;
}

[data-theme="dark"] .area-thumb-item {
    border-color: rgba(255, 255, 255, 0.15);
}


.area-options-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.area-card-subhead {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.area-card-subhead .dot-separator {
    opacity: 0.4;
}

/* Dashboard Summary List */
.dashboard-areas-summary-list {
    display: flex;
    flex-direction: column;
}

.dashboard-area-row {
    transition: background 0.15s ease;
    padding: 0.6rem 0.25rem;
}

.dashboard-area-row:hover {
    background: rgba(30, 45, 61, 0.02);
}

.dashboard-area-row:last-child {
    border-bottom: none !important;
}

.dashboard-area-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(30, 45, 61, 0.08);
    color: var(--perm-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Dark Mode Support for Áreas */
[data-theme="dark"] .areas-toolbar {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .areas-search-input {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

[data-theme="dark"] .areas-stat-pill {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

[data-theme="dark"] .areas-stat-pill strong {
    color: #f1f5f9;
}

[data-theme="dark"] .area-page-card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}


[data-theme="dark"] .dashboard-area-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .dashboard-area-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

/* ============================
   Area Card – Icon Badge
   ============================ */
.area-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: rgba(30, 45, 61, 0.07);
    color: var(--perm-navy, #1e2d3d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.area-card-icon-protected {
    background: rgba(234, 179, 8, 0.12);
    color: #92400e;
}

[data-theme="dark"] .area-card-icon {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

[data-theme="dark"] .area-card-icon-protected {
    background: rgba(234, 179, 8, 0.15);
    color: #fbbf24;
}

/* ============================
   Area Card – Middle Section
   ============================ */
.area-card-middle {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* ============================
   Area Card – Category Breakdown
   ============================ */
.area-card-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
}

/* ============================
   Area Card – Footer Actions
   (uniform size for all buttons)
   ============================ */



/* Gallery button */
.btn-galeria-area-card {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    background: #f1f5f9;
    color: var(--perm-navy, #1e2d3d);
    border: 1px solid rgba(30, 45, 61, 0.12);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-galeria-area-card:hover {
    background: #e2e8f0;
    border-color: rgba(30, 45, 61, 0.22);
}

.btn-galeria-area-card .badge {
    font-size: 0.7rem;
    padding: 0.15em 0.45em;
    border-radius: 999px;
    line-height: 1.4;
}

[data-theme="dark"] .btn-galeria-area-card {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .btn-galeria-area-card:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Despesa button */
.btn-despesa-area-card {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    padding: 0 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(37, 99, 235, 0.07);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.18);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-despesa-area-card:hover {
    background: rgba(37, 99, 235, 0.13);
    border-color: rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .btn-despesa-area-card {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
    border-color: rgba(37, 99, 235, 0.25);
}

[data-theme="dark"] .btn-despesa-area-card:hover {
    background: rgba(37, 99, 235, 0.22);
}

/* ============================
   Nova Área Panel – Dark Mode
   ============================ */
[data-theme="dark"] #painelNovaArea .card {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] #painelNovaArea .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] #painelNovaArea .expense-form-field {
    background: linear-gradient(180deg, #0f172a, #0d1a27);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #painelNovaArea .expense-form-field .form-label {
    color: #e2e8f0;
}

[data-theme="dark"] #painelNovaArea .modal-header-icon-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

[data-theme="dark"] #painelNovaArea [style*="border-top"] {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   TOASTS / MENSAGENS POP-UP (canto inferior direito)
   ========================================================================== */

.toast-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
    max-width: min(92vw, 380px);
}

.toast-stack .toast {
    pointer-events: auto;
    width: auto;
    max-width: min(92vw, 380px);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    font-size: 0.92rem;
}

.toast-stack .toast-body {
    padding: 0.65rem 0.35rem 0.65rem 0.9rem;
    line-height: 1.35;
}

.toast-stack .toast-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.toast-stack .toast-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Modo mobile: garantir que os toasts nunca tapam a barra inferior */

/* Barra em baixo (60px) */
@media (max-width: 767.98px) {
    [data-mobile-nav="bottom"] .toast-stack {
        bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
        right: 0.75rem !important;
        left: auto !important;
    }
}

/* Ilha flutuante (56px + 12px de margem) */
@media (max-width: 767.98px) {
    [data-mobile-nav="island"] .toast-stack {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 0.75rem !important;
        left: auto !important;
    }
}

/* Barra em cima: os toasts podem continuar em baixo, só ajustar margens */
@media (max-width: 767.98px) {
    [data-mobile-nav="top"] .toast-stack {
        bottom: 0.75rem !important;
        right: 0.75rem !important;
        left: auto !important;
    }
}
/* =====================================================
   Formulário de Despesa como PÁGINA (desktop ≥ 992px)
   Em ecrãs largos o formulário é promovido a página em #app
   e aproveita a largura total; o markup é o mesmo do modal.
   ===================================================== */

.expense-page {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 100%;
    padding-bottom: 1rem;
}

/* Na página de despesa os toasts aparecem no topo-direito (em vez de baixo),
   para nunca taparem o rodapé de ações. É preciso !important para vencer as
   utilidades Bootstrap .bottom-0/.end-0. */
body.despesa-como-pagina .toast-stack {
    top: 1rem !important;
    bottom: auto !important;
    align-items: flex-end;
}

/* Deixa entrar por baixo da topbar em ecrãs pequenos */
@media (max-width: 767.98px) {
    body.despesa-como-pagina .toast-stack {
        top: auto !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

.expense-page-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.expense-page-topo-identidade {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.expense-page-topo-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.expense-page-corpo {
    display: block;
}

.expense-page-rodape {
    /* Rodapé normal, no fim do cartão: sem sticky, sem flutuar sobre o
       conteúdo. Simples e previsível. */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* Os botões do rodapé podem encolher/rebentar em linha em vez de
   transbordarem para fora do ecrã. */
.expense-page-rodape .btn {
    min-width: 0;
    max-width: 100%;
}

/* O .modal-footer (com o seu próprio padding e margens negativas herdadas
   do contexto do modal) passa a ocupar exatamente a largura do rodapé,
   sem transbordar nem empurrar botões para fora do ecrã. */
.expense-page-rodape .expense-modal-footer {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.expense-page-rodape .expense-footer-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}

/* ── Painéis de secção (só em modo página) ────────────────────────────
   Agrupam os campos em zonas lógicas e dão um cabeçalho subtil, reduzindo
   o ruído visual de 9 cards soltos. */
.expense-page-friendly-panel {
    display: contents;
}

/* ≥1800px: mais respiro em ecrãs muito largos */
@media (min-width: 1800px) {
    .expense-page .expense-page-corpo {
        padding: 1.7rem;
    }

    .expense-page .expense-page-corpo .expense-modal-body > .row.g-3 {
        gap: 1rem;
    }
}

[data-theme="dark"] .expense-page-corpo {
    background: #16212f;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .expense-page-rodape {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(20, 31, 45, 0.97);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* O rodapé flui no fim do formulário, por isso não é preciso reservar
   espaço artificial: o #app mantém apenas o padding normal. */
body.despesa-como-pagina #app {
    padding-bottom: 1.5rem !important;
}

@media (max-width: 991.98px) {
    body.despesa-como-pagina #app {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
    }
}

/* Enquanto o formulário está como página, o overlay do modal não interfere */
body.despesa-como-pagina .modal-backdrop {
    display: none;
}
/* ══════
   FORMULÁRIO DE DESPESA — redesign
   ──────────────────────
   Princípios:
   1. SEM caixas dentro de caixas. Existe um único contentor (o painel do
      formulário). Os campos não são cards: são linhas de um formulário.
      O emolduramento duplo era a maior fonte de ruído visual.
   2. SEM alturas mínimas artificiais. Cada linha tem a altura do seu
      conteúdo — é isso que elimina o vazio por baixo dos campos curtos.
   3. O VALOR domina. É o dado mais importante, por isso tem um bloco
      próprio, grande, à esquerda. Data e Loja empilham à direita.
   4. Separação por ESPAÇO e títulos discretos, não por molduras.
   ══════ */

.despesa-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Secções ──────────────────────── */

.df-seccao {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Descrição (larga) e Anexos (estreita) lado a lado na mesma linha. */
.df-linha-descricao {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.42fr);
    gap: 0.85rem;
    align-items: stretch;
}

.df-linha-descricao > .df-campo {
    height: 100%;
}

.df-seccao-titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(30, 45, 61, 0.08);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.df-seccao-titulo i {
    color: var(--perm-gold);
    font-size: 0.95rem;
}

.df-opcional {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.08rem 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    color: #64748b;
    vertical-align: middle;
}

/* ── Campos: linhas simples, sem moldura de card ──────────────────── */

.df-campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.df-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--perm-navy);
}

.df-label i {
    font-size: 0.9rem;
    color: #94a3b8;
}

.df-input,
.df-textarea {
    width: 100%;
    min-width: 0;
    padding: 0.62rem 0.8rem;
    border: 1px solid rgba(30, 45, 61, 0.14);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--perm-navy);
    font-size: 0.95rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.df-input:focus,
.df-textarea:focus {
    outline: none;
    border-color: var(--perm-gold);
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.14);
}

.df-textarea {
    resize: vertical;
    line-height: 1.5;
}

/* ── Primeira linha: Valor + Data + Loja + Pagamento ──────────── */

.df-essencial {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
    gap: 0.85rem;
    align-items: start;
}

.df-essencial > .df-linha-campo,
.df-essencial > .df-valor-bloco {
    min-width: 0;
}

.df-valor-bloco {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.df-valor-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--perm-navy);
}

.df-valor-label i {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Caixa do valor: mesmo aspeto dos restantes campos (Data, Loja). */
.df-valor-campo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.62rem 0.8rem;
    border: 1px solid rgba(30, 45, 61, 0.14);
    border-radius: 0.7rem;
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.df-valor-campo:focus-within {
    border-color: var(--perm-gold);
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.14);
}

.df-valor-moeda {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
}

.df-valor-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--perm-navy) !important;
}

.df-valor-input:focus {
    outline: none;
}

.df-valor-input::placeholder {
    color: rgba(30, 45, 61, 0.35);
    font-weight: 400;
}

/* A caixa do valor tem a altura natural de um campo (como Data e Loja),
   em vez de esticar para preencher a coluna. */
.df-valor-bloco .df-valor-campo {
    flex: 0 0 auto;
}

/* Descrição: a caixa cresce para nivelar a altura com a caixa de anexos. */
#campoDescricaoDespesa .df-textarea {
    flex: 1 1 auto;
    resize: none;
}

.df-linha-campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

/* ── Classificação: Área + Categoria na mesma linha ───────── */

.df-grelha-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.df-grelha-2 > .df-campo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.df-campo-estado {
    margin-top: 0.15rem;
}

/* ── Chips: pílulas planas, sem sombra pesada ──────────────────────── */

.despesa-form .selection-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.despesa-form .selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(30, 45, 61, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--perm-navy);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.despesa-form .selection-chip:hover {
    border-color: rgba(181, 139, 58, 0.55);
    color: var(--perm-gold);
    transform: none;
}

.despesa-form .selection-chip.active {
    background: var(--perm-navy);
    border-color: var(--perm-navy);
    color: #fff;
    box-shadow: 0 3px 10px rgba(30, 45, 61, 0.18);
}

/* Botão "Nova área": não é uma área, é uma ação. Borda tracejada discreta
   e tom dourado muito leve para o distinguir das áreas reais sem competir
   com elas. */
.despesa-form .selection-chip.chip-add-action {
    border-style: dashed;
}

/* Estado de pagamento: os 3 chips fluem numa linha e quebram apenas se
   não houver espaço. Simples e sempre equilibrado. */
#estadoPagamentoOptions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

#estadoPagamentoOptions .selection-chip {
    justify-content: center;
    min-width: 0;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.84rem;
}

/* Mesma altura em todos os chips da classificação, a crescer com o texto. */
#areaOptions .selection-chip,
#categoriaOptions .selection-chip,
#estadoPagamentoOptions .selection-chip {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-size: 0.84rem;
    line-height: 1.25;
    align-items: center;
}

/* ── Zona de fatura: caixa estreita com ações e leitura automática ─── */

.despesa-form #campoAnexosDespesa {
    height: 100%;
}

.despesa-form #campoAnexosDespesa .expense-upload-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 0.5rem;
    min-height: 8.6rem;
    width: 100%;
    padding: 0.95rem 0.85rem;
    border: 1.5px dashed rgba(181, 139, 58, 0.5);
    border-radius: 0.95rem;
    background: #fdfaf2;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.despesa-form .expense-upload-shell:hover,
.despesa-form .expense-upload-shell:focus-visible {
    border-color: rgba(181, 139, 58, 0.75);
    background: #fdf6e8;
    box-shadow: 0 10px 24px rgba(181, 139, 58, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.despesa-form .expense-upload-shell:focus-visible {
    outline: 3px solid rgba(181, 139, 58, 0.28);
    outline-offset: 2px;
}

.despesa-form .expense-upload-shell:hover .expense-upload-icone,
.despesa-form .expense-upload-shell:focus-visible .expense-upload-icone {
    background: rgba(181, 139, 58, 0.22);
    transform: scale(1.06);
}

.despesa-form .expense-upload-shell.is-dragover {
    border-color: var(--perm-gold);
    border-style: solid;
    background: rgba(181, 139, 58, 0.1);
    box-shadow: 0 0 0 4px rgba(181, 139, 58, 0.16);
}

/* Estado com ficheiros: a caixa deixa de ser pontilhada e ganha peso,
   sinalizando que já há fatura(s) anexada(s).
   O seletor inclui #campoAnexosDespesa para vencer a especificidade da
   regra base da caixa (que também usa o id). */
.despesa-form #campoAnexosDespesa .expense-upload-shell.tem-anexos,
.despesa-form .expense-upload-shell.tem-anexos {
    border-style: solid;
    border-color: rgba(181, 139, 58, 0.65);
    background: #fdf5e2;
}

.despesa-form .expense-upload-shell.tem-anexos .expense-upload-icone {
    background: var(--perm-gold);
    color: #fff;
}

.despesa-form .expense-upload-shell.tem-anexos .expense-upload-texto {
    color: var(--perm-gold);
}

.despesa-form .expense-upload-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    background: rgba(181, 139, 58, 0.14);
    color: var(--perm-gold);
    font-size: 1.15rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.despesa-form .expense-upload-texto {
    flex-shrink: 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--perm-navy);
    text-align: center;
    transition: color 0.18s ease;
}

/* Contador de ficheiros: pequena pílula no canto superior da caixa. */
.despesa-form .expense-upload-contador {
    position: absolute;
    top: 0.55rem;
    right: 0.6rem;
    display: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    background: var(--perm-navy);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 3px 8px rgba(30, 45, 61, 0.22);
}

.despesa-form .expense-upload-shell.tem-anexos .expense-upload-contador {
    display: inline-flex;
}

/* Linha informativa: leitura automática da fatura (QR AT, PDF ou OCR) */
.despesa-form .expense-upload-hint {
    max-width: 100%;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #94a3b8;
    text-align: center;
}

.despesa-form .expense-upload-hint .bi {
    color: var(--perm-gold);
}

/* Estado atual dos anexos: resumo compacto por baixo da caixa */
.despesa-form > #campoAnexosDespesa > .expense-upload-estado,
.expense-modal-body .df-linha-descricao + * .expense-upload-estado {
    min-width: 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.despesa-form .expense-upload-estado {
    min-width: 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ── Garantia ─────────────────────── */

.df-seccao-garantia {
    padding-top: 1.1rem;
    border-top: 1px solid rgba(30, 45, 61, 0.08);
}

.df-garantia-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.df-garantia-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--perm-navy);
    cursor: pointer;
}

.df-garantia-label i {
    font-size: 1.1rem;
    color: var(--perm-gold);
}

/* ── Rodapé dentro do mesmo cartão do formulário ───────────────────────
   O rodapé está DENTRO do .expense-modal-body (ver index.html), por isso
   partilha a mesma superfície branca do resto do modal: sem fundo próprio,
   sem faixa cinzenta, sem canto arredondado. A separação é feita apenas
   pela linha fina, que atravessa a largura interior do cartão. */

.expense-modal-content .expense-modal-body {
    padding-bottom: 0;
    background: #fff;
}

.expense-modal-content .expense-preview-linha {
    margin: 0.35rem 0 0;
    border-radius: 0.85rem;
}

.expense-modal-content .expense-modal-footer {
    align-items: flex-end;
    width: auto;
    margin: 0.85rem -1.2rem 0;
    padding: 0.95rem 1.2rem 0;
    border-top: 1px solid rgba(30, 45, 61, 0.08);
    border-radius: 0;
    background: #fff;
}

[data-theme="dark"] .expense-modal-content .expense-modal-body {
    background: #1a2634;
}

[data-theme="dark"] .expense-modal-content .expense-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: #1a2634;
}

/* ── Modo página: o painel único ────────────────────
   O formulário de despesa é sempre uma página (desktop e mobile), por
   isso o painel e a coluna única aplicam-se em todas as larguras. */

.expense-page .expense-page-corpo {
    background: #ffffff;
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-radius: 1.35rem;
    padding: 1.6rem 1.7rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

.expense-page .expense-page-corpo .expense-modal-body {
    padding: 0;
}

/* A grelha externa deixa de ser uma grelha: os 3 blocos do formulário
   empilham numa coluna. É o fim das "linhas de cards" a competir.
   Nota: apenas a linha principal (filha direta de .expense-modal-body);
   linhas aninhadas — ex.: as duas colunas do painel da garantia —
   mantêm o comportamento normal do Bootstrap. */
.expense-page .expense-page-corpo .expense-modal-body > .row.g-3 {
    display: block;
}

.expense-page .expense-page-corpo .expense-modal-body > .row.g-3 > .col-12 {
    width: 100%;
    min-width: 0;
}

.despesa-form {
    gap: 1.9rem;
    max-width: 100%;
}

/* Com as secções sem caixa, o afastamento vertical é o que as separa. */
.despesa-form .df-seccao + .df-seccao {
    padding-top: 0.35rem;
}

@media (min-width: 992px) {
    /* Linha do essencial: Valor, Data, Loja e Pagamento lado a lado,
       com o Valor ligeiramente maior por ser o campo principal. */
    .df-essencial {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
        gap: 1.1rem;
    }

    .df-grelha-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.1rem;
    }
}

/* Todos os chips (Área, Categoria e Pagamento) mantêm o tamanho natural
   e quebram em linhas equilibradas: nenhum estica sozinho para preencher
   a linha, o que criava um chip desproporcionalmente largo. */
#areaOptions .selection-chip,
#categoriaOptions .selection-chip,
#estadoPagamentoOptions .selection-chip {
    flex: 0 1 auto;
    max-width: 100%;
}

/* ── Telemóvel: a página empilha tudo numa coluna ─────────────────── */

@media (max-width: 991.98px) {
    .expense-page .expense-page-corpo {
        border-radius: 1.1rem;
        padding: 1.2rem 1.1rem;
    }

    /* Em ecrãs estreitos o rodapé ocupa a largura do painel e os botões
       encolhem e quebram em linhas, sem transbordar para fora do ecrã. */
    .expense-page-rodape {
        gap: 0.45rem;
        padding: 0.6rem 0.7rem;
        justify-content: space-between;
    }

    .expense-page-rodape .btn {
        flex: 0 1 auto;
        min-width: 0;
        padding: 0.5rem 0.7rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* As ações ocupam a sua própria linha, podendo quebrar em duas
       conforme a largura; nunca ultrapassam a largura do rodapé. */
    .expense-page-rodape .expense-footer-acoes {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0.4rem;
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .expense-page-rodape #guardarDespesa {
        flex: 0 1 auto;
    }

    .df-essencial,
    .df-grelha-2,
    .df-grelha-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .df-linha-descricao {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Ecrãs muito largos: mais ar ──────────────────── */

@media (min-width: 1400px) {
    .despesa-form {
        gap: 1.9rem;
    }

    .df-essencial {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
    }

    .df-grelha-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

}

/* ── Tema escuro ──────────────────── */

[data-theme="dark"] .despesa-form .df-input,
[data-theme="dark"] .despesa-form .df-textarea,
[data-theme="dark"] .despesa-form .df-valor-campo {
    background: #1a2634;
    border-color: rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}

[data-theme="dark"] .despesa-form .df-label,
[data-theme="dark"] .despesa-form .df-valor-label {
    color: #e2e8f0;
}

[data-theme="dark"] .despesa-form .df-seccao-titulo {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[data-theme="dark"] .despesa-form .selection-chip {
    background: #1a2634;
    border-color: rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}

[data-theme="dark"] .despesa-form .selection-chip.active {
    background: var(--perm-gold);
    border-color: var(--perm-gold);
    color: #16212f;
}

[data-theme="dark"] .df-valor-campo {
    background: linear-gradient(180deg, #1e2b3b, #1a2634);
    border-color: rgba(181, 139, 58, 0.45);
}

[data-theme="dark"] .df-valor-input {
    color: #f8fafc !important;
}

[data-theme="dark"] .despesa-form .expense-upload-shell {
    background: #1a2634;
    border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .despesa-form .expense-upload-shell:hover,
[data-theme="dark"] .despesa-form .expense-upload-shell:focus-visible {
    background: #1e2b3b;
    border-color: rgba(181, 139, 58, 0.55);
}

[data-theme="dark"] .despesa-form #campoAnexosDespesa .expense-upload-shell.tem-anexos,
[data-theme="dark"] .despesa-form .expense-upload-shell.tem-anexos {
    background: #1f2c3c;
    border-style: solid;
    border-color: rgba(181, 139, 58, 0.6);
}

[data-theme="dark"] .despesa-form .expense-upload-shell.tem-anexos .expense-upload-texto {
    color: var(--perm-gold);
}

[data-theme="dark"] .despesa-form .expense-upload-texto .fw-semibold,
[data-theme="dark"] .df-garantia-label {
    color: #e2e8f0;
}

[data-theme="dark"] .df-seccao-garantia {
    border-top-color: rgba(255, 255, 255, 0.1);
}
/* ══════
   REDESIGN DO FORMULÁRIO DE DESPESA
   ──────────────────────
   Objetivo: transformar os campos num percurso guiado por "passos"
   (cards numerados), com o Valor a dominar e uma linguagem visual
   coerente (navy + dourado). Mantém todos os ids que o JS usa.
   ══════ */

/* ── Cabeçalho-hero do formulário (modal e página) ───────────────────── */

/* Cabeçalho-hero do formulário (modal). */
.expense-modal-header {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid rgba(30, 45, 61, 0.07);
}

.expense-modal-header .modal-header-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: #2e4257;
    color: var(--perm-gold);
    font-size: 1.1rem;
}

.expense-modal-header .modal-title {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--perm-navy);
}

.expense-modal-header .modal-subtitle {
    font-size: 0.82rem;
    color: #64748b;
}

/* ── Formulário corrido, sem caixas ──────────────────── */

/* Cada bloco interno é só um agrupamento lógico, sem cabeçalho nem
   moldura. O que separa os grupos é o espaço. */
.despesa-form .df-seccao {
    gap: 0.85rem;
}

/* Pequeno divisor entre o grupo principal e os campos opcionais
   (descrição/fatura/garantia). */
.despesa-form .df-seccao + .df-seccao {
    margin-top: 0.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(30, 45, 61, 0.08);
}

/* ── Valor: mesma caixa dos restantes campos, número alinhado à direita ── */

.despesa-form .df-valor-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ── Chips de Área, Categoria e Pagamento ──────────────────────────────
   As cores (contorno, texto e fundo do chip ativo) vêm do próprio chip,
   via data-color: a cor da categoria e as cores do estado de pagamento
   (por pagar / parcialmente pago / pago). O CSS não as sobrepõe. */

#categoriaOptions .selection-chip,
#estadoPagamentoOptions .selection-chip {
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* ── Garantia: card próprio com cabeçalho alinhado ───────────────────── */

/* Garantia: dentro da secção "Detalhes", separada por uma linha fina.
   Sem fundo nem contorno; quando ligada, o cabeçalho ganha um tom
   dourado suave. */
.despesa-form .df-card-garantia {
    margin-top: 0.4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 45, 61, 0.08);
}

.df-card-garantia .df-garantia-cabecalho {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Ícone (escudo) da garantia: pequeno, dourado, à esquerda do texto. */
.df-card-garantia .df-step-garantia {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    background: rgba(181, 139, 58, 0.12);
    color: var(--perm-gold);
    font-size: 0.85rem;
}

/* O bloco do título cresce, colando-o ao ícone (à esquerda);
   o switch fica empurrado para a direita. */
.df-card-garantia .df-card-titulo-bloco {
    flex: 1 1 auto;
    min-width: 0;
}

.df-card-garantia .form-check {
    flex-shrink: 0;
}

.df-card-garantia.tem-garantia .df-garantia-label span:first-child {
    color: var(--perm-navy);
}

.df-card-garantia .df-garantia-label {
    font-size: 0.92rem;
    font-weight: 700;
}

.df-card-garantia .form-check-input {
    width: 2.4rem;
    height: 1.3rem;
    cursor: pointer;
}

/* Pequena transição quando o painel da garantia abre. */
.expense-warranty-panel {
    animation: dfPanelAbrir 0.22s ease;
}

@keyframes dfPanelAbrir {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Ajustes de espaçamento em modo página ───────────────────────────── */

.expense-page .despesa-form .df-card {
    border-radius: 1.15rem;
}

/* ── Telemóvel: grupos mais compactos ─────────────────── */

@media (max-width: 991.98px) {
    .despesa-form .df-seccao + .df-seccao {
        margin-top: 0.25rem;
        padding-top: 0.9rem;
    }
}

/* ── Tema escuro do redesign ─────────────────────────── */

[data-theme="dark"] .expense-modal-header {
    background: #1a2634;
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .expense-modal-header .modal-title {
    color: #f1f5f9;
}

[data-theme="dark"] .expense-modal-header .modal-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .despesa-form .df-card {
    background: #1a2634;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] .despesa-form .df-card:focus-within {
    border-color: rgba(181, 139, 58, 0.4);
}

[data-theme="dark"] .despesa-form .df-card .df-seccao-titulo {
    color: #f1f5f9;
}

[data-theme="dark"] .despesa-form .df-card-garantia {
    background: #1a2634;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .despesa-form .df-card-garantia.tem-garantia {
    background: #1f2c3c;
    border-color: rgba(181, 139, 58, 0.45);
}

[data-theme="dark"] .despesa-form .df-valor-campo {
    background: #1f2c3c;
}

[data-theme="dark"] .df-card-cabecalho {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}


/* ── Nova despesa: modal a ocupar (quase) toda a largura ── */
.modal-despesa-full {
    --bs-modal-width: 100%;
    max-width: 100%;
    margin: 0;
}

.modal-despesa-full .modal-content {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
}

@media (min-width: 576px) {
    .modal-despesa-full {
        max-width: 100%;
        margin: 0;
    }
}

/* ── Nova despesa: hierarquia simples e inspiração Fluent/Material ── */
.expense-modal-content {
    border-radius: 0.75rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.expense-modal-header {
    padding: 1rem 1.25rem;
}

.expense-modal-header .modal-subtitle {
    color: #5f6b7a;
}

.despesa-form .df-input,
.despesa-form .df-textarea,
.despesa-form .df-valor-campo {
    /* Padrão da app: mesma altura e raio para todos os campos,
       incluindo o do Valor na primeira linha. */
    min-height: 2.75rem;
    border-radius: 0.7rem;
    box-shadow: none;
}

.despesa-form .df-input:focus,
.despesa-form .df-textarea:focus,
.despesa-form .df-valor-campo:focus-within {
    border-color: var(--perm-gold);
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.14);
}

/* O valor deixa de ser "protagonista" em altura/fonte: fica uniforme
   com Data e Loja, mantendo apenas o peso e o alinhamento à direita. */
.despesa-form .df-valor-campo {
    padding: 0.62rem 0.8rem;
}

.despesa-form .df-valor-moeda {
    font-size: 0.95rem;
}

.despesa-form .df-valor-input {
    font-size: 0.95rem !important;
}

.despesa-form .selection-chip {
    border-radius: 0.45rem;
    box-shadow: none;
}

.despesa-form .selection-chip.active {
    background: #1e3a5f;
    border-color: #1e3a5f;
    box-shadow: none;
}

.despesa-form .expense-upload-shell {
    min-height: 7.5rem;
    border-radius: 0.55rem;
    background: #fafbfc;
    box-shadow: none;
}

.despesa-form .expense-upload-shell:hover,
.despesa-form .expense-upload-shell:focus-visible {
    background: #f4f7fb;
    box-shadow: 0 0 0 1px #2563eb;
    transform: none;
}

.expense-modal-footer {
    align-items: center;
}

.expense-modal-footer .expense-footer-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.expense-modal-footer .btn {
    min-height: 2.6rem;
    font-weight: 600;
}

.expense-field-updated {
    animation: expenseFieldUpdated 1.8s ease-out;
}

@keyframes expenseFieldUpdated {
    0% {
        background-color: #fff8df;
        border-color: #b58b3a;
        box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.2);
    }

    100% {
        background-color: inherit;
    }
}

[data-theme="dark"] .despesa-form .df-valor-campo {
    background: #1e2b3b;
    border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="dark"] .despesa-form .expense-upload-shell {
    background: #1b2939;
}

[data-theme="dark"] .expense-modal-footer #cancelarDespesa {
    color: #cbd5e1;
}
@media (max-width: 575.98px) {
    .expense-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .expense-modal-footer .btn-ditar-footer {
        align-self: flex-start;
    }

    .expense-modal-footer .expense-footer-acoes {
        width: 100%;
        margin-left: 0;
    }

    .expense-modal-footer .expense-footer-acoes .btn {
        flex: 1 1 auto;
    }

    .expense-modal-footer #guardarDespesa {
        min-width: 0;
    }
}


/* ── Pílulas do formulário de despesa ─────────────────────────────── */
.despesa-form .selection-chip,
.despesa-form .btn,
.despesa-form .btn-garantia-preset,
.expense-modal-footer .btn {
    border-radius: 999px;
}

.despesa-form .selection-chip {
    min-height: 2.35rem;
    padding: 0.48rem 0.9rem;
}

.despesa-form .selection-chip.chip-add-action {
    border-style: dashed;
    background: transparent;
}

.despesa-form .selection-chip:focus-visible,
.despesa-form .btn:focus-visible,
.expense-modal-footer .btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

/* ── Upgrade da garantia: cartão informativo e controlo mais evidente ── */
.despesa-form .df-card-garantia {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem;
    border: 1px solid #d8dee8;
    border-radius: 1rem;
    background: #f8fafc;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.despesa-form .df-card-garantia.tem-garantia {
    border-color: rgba(30, 45, 61, 0.35);
    background: #f6f8fb;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.06);
}

.despesa-form .df-card-garantia .df-garantia-cabecalho {
    gap: 0.75rem;
}

.despesa-form .df-card-garantia .df-step-garantia {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(30, 45, 61, 0.08);
    font-size: 1rem;
}

.despesa-form .df-card-garantia.tem-garantia .df-step-garantia {
    background: var(--perm-navy);
    color: #fff;
}

.despesa-form .df-card-garantia .df-garantia-label {
    font-size: 0.95rem;
}

.despesa-form .df-card-garantia .df-seccao-sub {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #64748b;
}

/* Switch da garantia: padrão Bootstrap, sem pintura personalizada
   (o atalho "background" apagava o thumb do switch e deixava-o bugado). */

.despesa-form .expense-warranty-panel {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 45, 61, 0.1);
}

/* Grupo "Prazo": legenda + presets alinhados na mesma linha */
.despesa-form .expense-warranty-grupo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.despesa-form .expense-warranty-legenda {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.despesa-form .expense-warranty-presets {
    gap: 0.5rem;
}

.despesa-form .btn-garantia-preset {
    min-height: 2.25rem;
    padding: 0.42rem 0.85rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
}

.despesa-form .btn-garantia-preset:hover {
    border-color: var(--perm-navy);
    color: var(--perm-navy);
}

.despesa-form .btn-garantia-preset.active {
    border-color: var(--perm-navy);
    background: var(--perm-navy);
    color: #fff;
}

.despesa-form .expense-warranty-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.55rem;
    background: #f2f5f9;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.35;
}

.despesa-form .expense-warranty-preview .bi {
    font-size: 1rem;
    color: var(--perm-navy);
    flex-shrink: 0;
}

[data-theme="dark"] .despesa-form .df-card-garantia {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, #1a2634 0%, #263344 100%);
}

[data-theme="dark"] .despesa-form .df-card-garantia.tem-garantia {
    border-color: rgba(255, 255, 255, 0.25);
    background: #1f2c3c;
}

[data-theme="dark"] .despesa-form .btn-garantia-preset {
    border-color: rgba(255, 255, 255, 0.16);
    background: #1a2634;
    color: #e2e8f0;
}

[data-theme="dark"] .despesa-form .expense-warranty-preview {
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
}


/* ── Página Nova despesa: formulário integrado no fundo ───────────── */
body.despesa-como-pagina {
    background: #eef1f5;
}

body.despesa-como-pagina .app-content {
    background: transparent;
}

body.despesa-como-pagina .expense-page {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body.despesa-como-pagina .expense-page .expense-page-corpo {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.despesa-como-pagina .expense-page .expense-modal-body {
    background: transparent;
}

body.despesa-como-pagina .expense-page .expense-page-rodape {
    margin-top: 1.75rem;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(30, 45, 61, 0.12);
    background: transparent;
}

body.despesa-como-pagina .expense-page .expense-modal-footer {
    background: transparent;
    border-top: 0;
    margin: 0;
    padding: 0;
}

body.despesa-como-pagina .expense-page .df-card-garantia,
body.despesa-como-pagina .expense-page .expense-upload-shell,
body.despesa-como-pagina .expense-page .ocr-status-card {
    /* Estes elementos continuam com superfície própria para manter a
       separação visual das funcionalidades opcionais. */
}

@media (max-width: 767.98px) {
    body.despesa-como-pagina .expense-page {
        padding: 0;
    }
}

[data-theme="dark"] body.despesa-como-pagina {
    background: #111b27;
}


/* ── Nova despesa: acabamento Fluent corporativo ──────────────────────
   Superfícies neutras, azul funcional e hierarquia sem decoração. */
body.despesa-como-pagina {
    background: #f3f4f6;
    color: #242424;
}

body.despesa-como-pagina .expense-page {
    max-width: 100%;
    padding-top: 2rem;
}

body.despesa-como-pagina .expense-page .modal-header-icon-badge {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #e8f1fb;
    color: #0f6cbd;
    font-size: 1.05rem;
}

body.despesa-como-pagina .expense-page .tab-page-title {
    color: #242424;
    font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.75rem);
    font-weight: 650;
    letter-spacing: 0;
}

body.despesa-como-pagina .expense-page .tab-page-subtitle {
    color: #616161;
    font-size: 0.875rem;
    font-weight: 400;
}

body.despesa-como-pagina .despesa-form {
    gap: 2.25rem;
}

body.despesa-como-pagina .df-seccao + .df-seccao {
    margin-top: 0;
    padding-top: 1.75rem;
    border-top-color: #d6d6d6;
}

body.despesa-como-pagina .df-label,
body.despesa-como-pagina .df-valor-label {
    color: #424242;
    font-size: 0.8125rem;
    font-weight: 600;
}

body.despesa-como-pagina .df-label i,
body.despesa-como-pagina .df-valor-label i {
    display: none;
}

body.despesa-como-pagina .df-input,
body.despesa-como-pagina .df-textarea,
body.despesa-como-pagina .df-valor-campo {
    /* Padrão da app: raio 0.7rem e borda suave base */
    border: 1px solid rgba(30, 45, 61, 0.14);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: none;
}

body.despesa-como-pagina .df-input,
body.despesa-como-pagina .df-textarea {
    min-height: 2.75rem;
    padding: 0.65rem 0.75rem;
}

body.despesa-como-pagina .df-input:focus,
body.despesa-como-pagina .df-textarea:focus,
body.despesa-como-pagina .df-valor-campo:focus-within {
    border-color: var(--perm-gold);
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.14);
}

/* Valor uniforme com Data/Loja: mesma altura e tamanho de letra. */
body.despesa-como-pagina .df-valor-campo {
    min-height: 2.75rem;
    background: #fff;
}

body.despesa-como-pagina .df-valor-input {
    color: #242424 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

body.despesa-como-pagina .df-valor-moeda {
    color: #616161;
    font-size: 0.95rem;
}

body.despesa-como-pagina .despesa-form .selection-chip {
    min-height: 2.25rem;
    border: 1px solid #8a8a8a;
    background: #fff;
    color: #424242;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 600;
}

body.despesa-como-pagina .despesa-form .selection-chip:hover {
    border-color: #0f6cbd;
    color: #0f6cbd;
}

body.despesa-como-pagina .despesa-form .selection-chip.active {
    border-color: #0f6cbd;
    background: #0f6cbd;
    color: #fff;
}

body.despesa-como-pagina .despesa-form .selection-chip.chip-add-action {
    border-color: #8a8a8a;
    background: transparent;
    color: #424242;
}

body.despesa-como-pagina .despesa-form .expense-upload-shell {
    min-height: 7rem;
    border: 1px dashed #8a8a8a;
    border-radius: 0.25rem;
    background: #fafafa;
    box-shadow: none;
}

body.despesa-como-pagina .despesa-form .expense-upload-shell:hover,
body.despesa-como-pagina .despesa-form .expense-upload-shell:focus-visible {
    border-color: #0f6cbd;
    background: #f5faff;
    box-shadow: 0 0 0 1px #0f6cbd;
}

body.despesa-como-pagina .despesa-form .df-card-garantia {
    border: 1px solid #d6d6d6;
    border-radius: 0.5rem;
    background: #fafafa;
    box-shadow: none;
}

body.despesa-como-pagina .despesa-form .df-card-garantia.tem-garantia {
    border-color: #0f6cbd;
    background: #f5faff;
    box-shadow: none;
}

body.despesa-como-pagina .despesa-form .df-card-garantia .df-step-garantia {
    border-radius: 0.35rem;
    background: #e8f1fb;
    color: #0f6cbd;
}

body.despesa-como-pagina .despesa-form .df-card-garantia.tem-garantia .df-step-garantia {
    background: #0f6cbd;
}

body.despesa-como-pagina .despesa-form .btn-garantia-preset {
    border-color: #8a8a8a;
    border-radius: 999px;
    background: #fff;
    color: #424242;
}

body.despesa-como-pagina .despesa-form .btn-garantia-preset.active {
    border-color: #0f6cbd;
    background: #0f6cbd;
    color: #fff;
}

body.despesa-como-pagina .despesa-form .expense-warranty-preview {
    border-radius: 0.25rem;
    background: #eef6fc;
    color: #424242;
}

body.despesa-como-pagina .expense-page-rodape {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top-color: #d6d6d6;
}

body.despesa-como-pagina .expense-modal-footer .btn {
    /* Padrão da app: pill, altura normal — sem cores à parte */
    min-height: 2.6rem;
    border-radius: 999px;
    font-size: inherit;
    font-weight: 600;
}

[data-theme="dark"] body.despesa-como-pagina {
    background: #202020;
    color: #f5f5f5;
}

[data-theme="dark"] body.despesa-como-pagina .df-seccao + .df-seccao,
[data-theme="dark"] body.despesa-como-pagina .expense-page-rodape {
    border-color: #484848;
}

[data-theme="dark"] body.despesa-como-pagina .expense-page .tab-page-title,
[data-theme="dark"] body.despesa-como-pagina .df-label,
[data-theme="dark"] body.despesa-como-pagina .df-valor-label {
    color: #f5f5f5;
}

[data-theme="dark"] body.despesa-como-pagina .expense-page .tab-page-subtitle,
[data-theme="dark"] body.despesa-como-pagina .df-label i {
    color: #c8c8c8;
}

[data-theme="dark"] body.despesa-como-pagina .df-input,
[data-theme="dark"] body.despesa-como-pagina .df-textarea,
[data-theme="dark"] body.despesa-como-pagina .df-valor-campo,
[data-theme="dark"] body.despesa-como-pagina .despesa-form .selection-chip,
[data-theme="dark"] body.despesa-como-pagina .despesa-form .btn-garantia-preset {
    border-color: #9a9a9a;
    background: #292929;
    color: #f5f5f5;
}


/* ── Reposição do estilo anterior à última revisão visual ──────────── */
body.despesa-como-pagina {
    background: #eef1f5;
    color: #222;
}

body.despesa-como-pagina .expense-page {
    max-width: 100%;
    padding-top: 0;
}

body.despesa-como-pagina .expense-page .modal-header-icon-badge {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: #2e4257;
    color: var(--perm-gold);
    font-size: 1.1rem;
}

body.despesa-como-pagina .expense-page .tab-page-title {
    color: var(--perm-navy);
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.01em;
}

body.despesa-como-pagina .expense-page .tab-page-subtitle {
    color: #5d6b83;
    font-size: inherit;
    font-weight: 500;
}

body.despesa-como-pagina .despesa-form {
    gap: 1.9rem;
}

body.despesa-como-pagina .df-seccao + .df-seccao {
    margin-top: 0.4rem;
    padding-top: 1.1rem;
    border-top-color: rgba(30, 45, 61, 0.08);
}

body.despesa-como-pagina .df-label,
body.despesa-como-pagina .df-valor-label {
    color: var(--perm-navy);
    font-size: 0.82rem;
    font-weight: 600;
}

body.despesa-como-pagina .df-label i,
body.despesa-como-pagina .df-valor-label i {
    display: inline;
}

body.despesa-como-pagina .df-input,
body.despesa-como-pagina .df-textarea,
body.despesa-como-pagina .df-valor-campo {
    /* Igual aos restantes inputs da app: raio, borda e fundo do padrão base */
    border: 1px solid rgba(30, 45, 61, 0.14);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: none;
}

body.despesa-como-pagina .df-input,
body.despesa-como-pagina .df-textarea {
    min-height: 2.75rem;
    padding: 0.62rem 0.8rem;
}

body.despesa-como-pagina .df-input:focus,
body.despesa-como-pagina .df-textarea:focus,
body.despesa-como-pagina .df-valor-campo:focus-within {
    border-color: var(--perm-gold);
    box-shadow: 0 0 0 3px rgba(181, 139, 58, 0.14);
}

body.despesa-como-pagina .df-valor-campo {
    min-height: 2.75rem;
}

body.despesa-como-pagina .df-valor-input {
    color: var(--perm-navy) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

body.despesa-como-pagina .df-valor-moeda {
    color: #64748b;
    font-size: 0.95rem;
}

body.despesa-como-pagina .despesa-form .selection-chip {
    min-height: 2.35rem;
    border: 1px solid rgba(30, 45, 61, 0.14);
    background: #fff;
    color: var(--perm-navy);
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 600;
}

body.despesa-como-pagina .despesa-form .selection-chip:hover {
    border-color: rgba(181, 139, 58, 0.55);
    color: var(--perm-gold);
}

body.despesa-como-pagina .despesa-form .selection-chip.active {
    border-color: var(--perm-navy);
    background: var(--perm-navy);
    color: #fff;
}

body.despesa-como-pagina .despesa-form .expense-upload-shell {
    min-height: 7.5rem;
    border: 1.5px dashed rgba(181, 139, 58, 0.5);
    border-radius: 0.55rem;
    background: #fafbfc;
    box-shadow: none;
}

body.despesa-como-pagina .despesa-form .df-card-garantia {
    border: 1px solid #d8dee8;
    border-radius: 1rem;
    background: #f8fafc;
    box-shadow: none;
}

body.despesa-como-pagina .despesa-form .df-card-garantia.tem-garantia {
    border-color: rgba(30, 45, 61, 0.35);
    background: #f6f8fb;
    box-shadow: 0 6px 18px rgba(11, 31, 58, 0.06);
}

body.despesa-como-pagina .despesa-form .btn-garantia-preset.active {
    border-color: var(--perm-navy);
    background: var(--perm-navy);
    color: #fff;
}

body.despesa-como-pagina .despesa-form .df-card-garantia .df-step-garantia {
    border-radius: 0.5rem;
    background: rgba(30, 45, 61, 0.08);
    color: var(--perm-navy);
}

body.despesa-como-pagina .despesa-form .df-card-garantia.tem-garantia .df-step-garantia {
    background: var(--perm-navy);
    color: #fff;
}

body.despesa-como-pagina .despesa-form .btn-garantia-preset {
    border-color: rgba(30, 45, 61, 0.16);
    background: #fff;
    color: var(--perm-navy);
}

body.despesa-como-pagina .despesa-form .btn-garantia-preset:hover {
    border-color: var(--perm-navy);
}

body.despesa-como-pagina .despesa-form .expense-warranty-preview {
    border-radius: 0.55rem;
    background: #f2f5f9;
    color: var(--perm-navy);
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .df-card-garantia {
    border-color: rgba(255, 255, 255, 0.14);
    background: #1a2634;
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .df-card-garantia.tem-garantia {
    border-color: rgba(255, 255, 255, 0.25);
    background: #1f2c3c;
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .df-card-garantia .df-step-garantia {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .df-card-garantia.tem-garantia .df-step-garantia {
    background: var(--perm-navy-2);
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .btn-garantia-preset {
    border-color: rgba(255, 255, 255, 0.16);
    background: #1a2634;
    color: #e2e8f0;
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .btn-garantia-preset.active {
    border-color: var(--perm-navy-2);
    background: var(--perm-navy-2);
    color: #fff;
}

[data-theme="dark"] body.despesa-como-pagina .despesa-form .expense-warranty-preview {
    background: rgba(255, 255, 255, 0.07);
    color: #cbd5e1;
}

body.despesa-como-pagina .expense-page-rodape {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top-color: rgba(30, 45, 61, 0.12);
}

body.despesa-como-pagina .expense-modal-footer .btn {
    min-height: 2.6rem;
    border-radius: 999px;
    font-size: inherit;
    font-weight: 600;
}

body.despesa-como-pagina .expense-modal-footer #guardarDespesa {
    /* Btn-primary padrão da app: --perm-navy-2, sem cor à parte */
    background: var(--perm-navy-2);
    border-color: var(--perm-navy-2);
    box-shadow: 0 4px 10px rgba(11, 31, 58, 0.14);
}

body.despesa-como-pagina .expense-modal-footer #guardarDespesa:hover {
    background: var(--perm-navy);
    border-color: var(--perm-navy);
}

[data-theme="dark"] body.despesa-como-pagina {
    background: #111b27;
    color: #e2e8f0;
}


/* ── Reposição das superfícies brancas da página de despesa ────────── */
/* Sem gap entre corpo e rodapé: formam um único cartão. */
body.despesa-como-pagina .expense-page {
    gap: 0;
}

/* Corpo e rodapé partilham o MESMO cartão: o corpo arredonda só em cima,
   o rodapé só em baixo; sem folga nem linha entre os dois. */
body.despesa-como-pagina .expense-page .expense-page-corpo {
    padding: 1.6rem 1.7rem;
    background: #ffffff;
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-bottom: 0;
    border-radius: 1.35rem 1.35rem 0 0;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
    margin-bottom: 0;
}

body.despesa-como-pagina .expense-page .expense-modal-body {
    background: #ffffff;
}

body.despesa-como-pagina .expense-page .expense-page-rodape {
    margin-top: 0;
    padding: 0.85rem 1.7rem 1.1rem;
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-top: 0;
    border-radius: 0 0 1.35rem 1.35rem;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

body.despesa-como-pagina .expense-page .expense-modal-footer {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    body.despesa-como-pagina .expense-page .expense-page-corpo {
        border-radius: 1.1rem 1.1rem 0 0;
        padding: 1.2rem 1.1rem;
    }

    body.despesa-como-pagina .expense-page .expense-page-rodape {
        border-radius: 0 0 1.1rem 1.1rem;
        padding: 0.85rem 1.1rem 1.1rem;
    }
}

[data-theme="dark"] body.despesa-como-pagina .expense-page .expense-page-corpo {
    background: #16212f;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] body.despesa-como-pagina .expense-page .expense-page-rodape {
    background: #16212f;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-theme="dark"] body.despesa-como-pagina .expense-page .expense-modal-body {
    background: #16212f;
}

[data-theme="dark"] body.despesa-como-pagina .expense-page .expense-page-rodape {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(20, 31, 45, 0.97);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Sino de notificações nos cabeçalhos das páginas (Áreas, Despesas, Projetos, Documentos) */
.tab-notificacoes-wrap {
    flex-shrink: 0;
    /* Garante que o sino fica sempre no extremo direito do cabeçalho,
       depois dos botões de ação, em todas as páginas */
    order: 99;
    margin-left: 0.25rem;
}

/* Estado silencioso: sem alertas pendentes — sino presente mas discreto */
.dashboard-notificacoes-sino--silencioso {
    border-color: rgba(100, 116, 139, 0.3);
    background-color: rgba(100, 116, 139, 0.1);
    color: #64748b;
    box-shadow: none;
    opacity: 0.75;
}

.dashboard-notificacoes-sino--silencioso:hover,
.dashboard-notificacoes-sino--silencioso.ativos {
    background-color: rgba(100, 116, 139, 0.18);
    transform: none;
}

[data-theme="dark"] .dashboard-notificacoes-sino--silencioso {
    border-color: rgba(148, 163, 184, 0.35);
    background-color: rgba(148, 163, 184, 0.12);
    color: #94a3b8;
}

.tab-notificacoes-wrap .dashboard-notificacoes-menu {
    right: 0;
    z-index: 1050;
}

/* ---- Active project card ---- */
/* O card ativo distingue-se apenas pela borda na cor do estado — sem fundos
   tintados, fitas ou sombras extra. */

/* ---- Budget progress bar ---- */
.project-card-orcamento {
    background: rgba(30, 45, 61, 0.04);
    border: 1px solid rgba(30, 45, 61, 0.08);
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
}

.project-card-orcamento span {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.project-card-orcamento strong {
    font-size: 0.86rem;
    color: var(--perm-navy);
}

.project-card-orcamento .small {
    font-size: 0.76rem;
    color: #64748b;
}

.orcamento-barra-track {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(30, 45, 61, 0.1);
    overflow: hidden;
}

.orcamento-barra-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.orcamento-barra-ok {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.orcamento-barra-warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.orcamento-barra-danger {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

/* ---- Agrupamento: pesquisa + filtros à esquerda, pills à direita ---- */
.areas-toolbar .areas-search-wrap {
    margin-right: auto;
}

.areas-toolbar .toolbar-left-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 260px;
    max-width: 520px;
}

.areas-toolbar .toolbar-left-group .areas-search-wrap {
    flex: 1;
    min-width: 0;
    margin-right: 0;
}

/* ---- Botão de filtros integrado na toolbar ---- */
.areas-toolbar .filters-toggle-btn {
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.42rem 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f1f5f9;
    border: 1px solid rgba(30, 45, 61, 0.12);
    color: #475569;
    white-space: nowrap;
    align-self: center;
    transition: all 0.15s ease;
}

.areas-toolbar .filters-toggle-btn:hover {
    background: #e2e8f0;
    border-color: rgba(30, 45, 61, 0.2);
    color: var(--perm-navy);
}

.areas-toolbar .filters-toggle-btn.is-active {
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.4);
    color: var(--perm-primary, #2563eb);
}

.filters-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    height: 1.25em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--perm-primary, #2563eb);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.areas-toolbar .filters-toggle-btn.is-active .filters-count-badge {
    background: var(--perm-primary, #2563eb);
}

/* ---- Painel de filtros dentro da toolbar (expande a própria toolbar) ---- */
.toolbar-filters-panel {
    flex-basis: 100%;
    width: 100%;
    border-top: 1px solid rgba(30, 45, 61, 0.08);
}

.toolbar-filters-panel > div {
    width: 100%;
    padding-top: 1rem;
}

.toolbar-filters-panel .expenses-filters-grid,
.toolbar-filters-panel .projects-filters-grid {
    width: 100%;
}

/* ---- Projects toolbar (reutiliza classes das Áreas) ---- */
.projects-toolbar .areas-stat-pill strong.text-danger {
    color: #dc2626 !important;
}

/* ---- Dark mode additions ---- */
[data-theme="dark"] .project-card-ativo-rodape {
    color: #e9d5a5;
    background: rgba(181, 139, 58, 0.16);
    border-top-color: rgba(181, 139, 58, 0.4);
}

[data-theme="dark"] .project-card-ativo-rodape i {
    color: #d9a84e;
}

[data-theme="dark"] .project-card-orcamento {
    background: rgba(30, 45, 61, 0.35);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .project-card-orcamento span {
    color: #94a3b8;
}

[data-theme="dark"] .project-card-orcamento strong {
    color: #e2e8f0;
}

[data-theme="dark"] .project-card-orcamento .small {
    color: #94a3b8;
}

[data-theme="dark"] .orcamento-barra-track {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .areas-toolbar .filters-toggle-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

[data-theme="dark"] .areas-toolbar .filters-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

[data-theme="dark"] .areas-toolbar .filters-toggle-btn.is-active {
    background: rgba(37, 99, 235, 0.22);
    border-color: rgba(96, 165, 250, 0.5);
    color: #93c5fd;
}

[data-theme="dark"] .toolbar-filters-panel {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .projects-toolbar .areas-stat-pill strong.text-danger {
    color: #f87171 !important;
}