/* static/css/styles.css */

/* =============== General Styles =============== */
html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #F0F2F5;
    color: #000000;
    display: flex;
    flex-direction: column;
}

/* Link Styles */
a {
    color: #064420;
    /* Dark Green */
}

a:hover {
    color: #056030;
    text-decoration: none;
}

/* =============== Navbar Styles =============== */
.navbar {
    background-color: #02220f !important;
    /* Dark green */
}

.navbar-content {
    position: fixed;
    top: 0;
    width: 100%;
    /* Garante que a navbar se estenda por toda a largura */
    z-index: 100;
}

.navbar-brand,
.nav-link,
.navbar-text {
    color: #FFFFFF !important;
    /* White text on dark background */
}

.nav-link.active {
    border-bottom: 2px solid #FFFFFF;
    /* Purple underline for active link */
}

.navbar-toggler-icon {
    /* Keep default Bootstrap white icon on dark navbars */
    filter: none;
}

/* =============== Content Styles =============== */
.content {
    padding-top: 50px;
    flex: 1;
}

/* =============== Flash Messages (Floating) =============== */
#flash-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

#flash-container .flash-toast {
    pointer-events: auto;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}



/* =============== Footer Styles =============== */
.footer {
    background-color: #02220f !important;
    /* Dark Blue */
    color: #FFFFFF;
    padding: 20px 0;
    margin-top: 50px;
}

.footer-content {
    flex-shrink: 0;
}

/* =============== Button Styles =============== */
.btn-primary {
    background-color: #064420;
    border-color: #064420;
}

.btn-primary:hover {
    background-color: #056030;
    border-color: #056030;
}

.btn-outline-light {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

.btn-outline-light:hover {
    background-color: #FFFFFF;
    color: #02220f;
    border-color: #FFFFFF;
}
/* =============== AI Button Styles =============== */
.btn-ai {
    background: linear-gradient(135deg, #1e293b 0%, #4c1d95 70%, #6366f1 100%);
    border: 1px solid #334155;
    color: #ffffff;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-ai::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    transition: left 0.6s ease;
    z-index: 1;
}

.btn-ai:hover {
    background: linear-gradient(135deg, #0f172a 0%, #581c87 70%, #4f46e5 100%);
    border-color: #475569;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(76, 29, 149, 0.3),
        0 0 20px rgba(99, 102, 241, 0.1);
}

.btn-ai:hover::after {
    left: 100%;
}

.btn-ai:focus {
    background: linear-gradient(135deg, #1e293b 0%, #4c1d95 70%, #6366f1 100%);
    border-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
}

.btn-ai:active {
    background: linear-gradient(135deg, #0f172a 0%, #581c87 70%, #4f46e5 100%);
    border-color: #475569;
    color: #ffffff;
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-ai i,
.btn-ai span,
.btn-ai * {
    position: relative;
    z-index: 2;
}

/* =============== Card Styles =============== */
.card {
    overflow: hidden;
    border-radius: 0.5rem;
}

.card-header {
    background-color: #02220f;
    /* Dark Green */
    color: #FFFFFF;
    font-weight: 500;
}

.card-title {
    color: #02220f;
    /* Dark Blue */
}

.card-text {
    color: #000000;
    /* Black */
}

/* =============== Form Styles =============== */
.form-control {
    border: 1px solid #CED4DA;
    border-radius: 0.25rem;
}

.form-control:focus {
    border-color: #064420;
    box-shadow: 0 0 0 0.2rem rgba(6, 68, 32, 0.25);
}

/* =============== Custom Utilities =============== */
.mt-auto {
    margin-top: auto;
}

/* =============== Alerts =============== */
.alert-success {
    background-color: #D4EDDA;
    border-color: #C3E6CB;
    color: #155724;
}

.alert-danger {
    background-color: #F8D7DA;
    border-color: #F5C6CB;
    color: #721C24;
}

/* =============== Table Styles =============== */
.table {
    background-color: #FFFFFF;
    border-radius: 0 !important;
    margin-bottom: 0;
}

.table-responsive {
    border-radius: 0 !important;
    overflow: visible;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.table thead th {
    background-color: #02220f;
    /* Dark green */
    color: #FFFFFF;
    border-bottom: none;
}

.table tbody td {
    color: #000000;
}

.table th {
    white-space: pre-wrap;
    /* Allows wrapping on white space */
    word-wrap: break-word;
    /* Breaks long words if necessary */
    max-width: 300px;
    /* Optional: limit cell width */
    line-height: 1.2;
    /* Reduced line-height for smaller rows */
    padding: 0.5rem;
    /* Reduced padding for smaller rows */
}

/* =============== Custom Scrollbar =============== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #064420;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #056030;
}

/* =============== Chart Containers =============== */
.chart-container {
    position: relative;
    height: 550px;
    margin-top: 50px;
}

.donut-chart-container {
    position: relative;
    height: 400px;
    margin-top: 30px;
}

/* Enhanced Chart Container Styles - Add this to your styles.css */
#financialFlowChart {
    height: 500px;
    width: 100%;
    min-height: 450px;
}

#categoryDonutChart {
    height: 500px;
    width: 100%;
    min-height: 450px;
}

/* Chart Card Responsiveness */
.chart-card {
    height: 100%;
    min-height: 550px;
}

.chart-card .card-body {
    padding: 1rem;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    #financialFlowChart {
        height: 500px;
        min-height: 450px;
    }
    
    #categoryDonutChart {
        height: 400px;
        min-height: 350px;
    }
    
    .chart-card {
        min-height: 550px;
        margin-bottom: 1rem;
    }
    
    .chart-card .card-body {
        padding: 0.5rem;
    }
    
    .chart-card .card-header {
        padding: 0.75rem 1rem;
    }
    
    .chart-card .card-footer {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
}


@media (max-width: 576px) {
    #financialFlowChart {
        height: 450px;
        min-height: 400px;
    }
    
    #categoryDonutChart {
        height: 350px;
        min-height: 300px;
    }
    
    .chart-card {
        min-height: 500px;
    }
}

.container-fluid {
    max-width: 1800px; 
    margin: 0 auto;    /* keep it centered */
    padding-top: 20px;
  }

/* =============== CSS Variables for Donut Colors =============== */
:root {
    /* Revenue Theme - Dark Green and its shades */
    --revenue-color-1: #006400;
    --revenue-color-2: #228B22;
    --revenue-color-3: #32CD32;
    --revenue-color-4: #2E8B57;
    --revenue-color-5: #3CB371;
    --revenue-color-6: #66CDAA;
    --revenue-color-7: #8FBC8F;
    --revenue-color-8: #20B2AA;
    --revenue-color-9: #3CB371;
    --revenue-color-10: #98FB98;

    /* Expense Theme - Dark Red and its shades */
    --expense-color-1: #8B0000;
    --expense-color-2: #B22222;
    --expense-color-3: #DC143C;
    --expense-color-4: #FF4500;
    --expense-color-5: #FF6347;
    --expense-color-6: #FF7F50;
    --expense-color-7: #CD5C5C;
    --expense-color-8: #F08080;
    --expense-color-9: #E9967A;
    --expense-color-10: #FA8072;
}

/* =============== Accordion Styles =============== */
.accordion-item {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    background-color: #ffffff;
}
.accordion-item:last-child {
    border-bottom: 0;
}

.accordion-button {
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    color: #333;
    background-color: #f8f9fa;
    position: relative;
}

.accordion-button.collapsed {
    background-color: #F0F2F5;
    /* Light grey background when collapsed */
    color: #02220f;
}

.accordion-button:not(.collapsed) {
    color: #064420;
    background-color: rgba(6, 68, 32, 0.05);
    font-weight: 600;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.125);
}

.accordion-button::after {
    filter: invert(1);
    color: #000000;
    margin-left: 10px;
}

/* Fixed positioning for badge in accordion */
.month-badge {
    position: absolute;
    right: 40px; /* Adjusted position */
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

/* =============== Tabs Styling =============== */
.nav-tabs {
    border-bottom: 1px solid #FFFFFF;
    /* Purple underline for tabs */
}

.nav-tabs .nav-link {
    background-color: #8a99a5;
    /* Subdued dark green background for inactive tabs */
    color: #FFFFFF;
    border: 1px solid transparent;
    transition: background-color 0.3s, color 0.3s;
}

.nav-tabs .nav-link:hover {
    background-color: #00692a;
    /* Slightly lighter dark green on hover */
    color: #FFFFFF;
}

.nav-tabs .nav-link.active {
    background-color: #02220f;
    /* Purple background for active tab */
    color: #FFFFFF;
    border-color: #FFFFFF #FFFFFF #FFFFFF;
}

/* =============== Hover Effects =============== */
.card:hover {
    transform: translateY(-5px);
    transition: transform 0.2s;
}

/* =============== Additional Button Hover Colors =============== */
.btn-secondary:hover {
    background-color: #5a1a16;
    border-color: #5a1a16;
}

.btn-success:hover {
    background-color: #145a32;
    border-color: #145a32;
}

.btn-info:hover {
    background-color: #0c5460;
    border-color: #0c5460;
}

.btn-danger:hover {
    background-color: #7a0c0c;
    border-color: #7a0c0c;
}

.btn-dark:hover {
    background-color: #343a40;
    border-color: #343a40;
}

/* =============== Icon Text Colors =============== */
.text-primary {
    color: #02220f !important;
}

.text-secondary {
    color: #6F1D1B !important;
}

.text-success {
    color: #064420 !important;
}

.text-info {
    color: #17a2b8 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.text-dark {
    color: #343a40 !important;
}

/* =============== Disabled Button Customization =============== */
.btn.disabled,
.btn:disabled,
.btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* =============== Additional Card & Table Padding =============== */
.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.card-text {
    flex-grow: 1;
    font-size: 1rem;
}

th {
    cursor: pointer;
}

/* =============== Expense Table Progress Bars =============== */
#expenseTable .expense-progress-bar {
    position: relative;
    background-color: #f0f0f0;
    /* Light gray background for empty state */
    height: 20px;
    border: 1px solid #ddd;
    /* Border for definition */
    border-radius: 4px;
    /* Rounded corners */
}

#expenseTable .expense-progress-bar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: width 0.3s;
    min-width: 30px;
    padding: 0 8px;
    box-sizing: border-box;
}

#expenseTable .progress-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #000;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    z-index: 1;
}

#expenseTable .expense-progress-bar.low-width .progress-text {
    left: 50%;
    transform: translate(-50%, -50%);
}

#expenseTable .bg-light-danger {
    background-color: #f8d7da;
}

#expenseTable .bg-light-success {
    background-color: #d4edda;
}

#expenseTable col {
    width: 20%;
}

#expenseTable th,
#expenseTable td {
    padding: 0.75rem;
    vertical-align: middle;
    text-align: center;
}

#expenseTable tfoot td {
    padding: 0.75rem;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    background-color: #ccdbd2;
}

@media (max-width: 768px) {

    #expenseTable th,
    #expenseTable td {
        padding: 0.5rem;
        font-size: 14px;
    }

    #expenseTable .expense-progress-bar-inner {
        min-width: 25px;
    }

    #expenseTable .progress-text {
        font-size: 10px;
    }
}

/* =============== Button Group =============== */
.btn-group .btn {
    margin: 2px;
    background-color: #02220f;
    color: #ffffff;
    border: #02220f;
    transition: background-color 0.3s, color 0.3s;
}

.btn-group .btn:hover {
    background-color: #056030;
    color: #ffffff;
}

.btn-group .btn:active {
    background-color: #064420;
    color: #ffffff;
}

.btn-group {
    flex-wrap: wrap;
}

/* =============== Month Picker =============== */
input[type="month"] {
    cursor: pointer;
    background-color: #fff;
}

input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    padding: 5px;
    filter: invert(0.5);
}

/* =============== Loading Indicator =============== */
#loadingIndicator {
    margin-top: 10px;
    color: #666;
}

/* ===================  Settings Family  ===================== */

.family-text {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.buttons-container {
    display: flex;
    /* Ativa o Flexbox para os elementos filhos */
    gap: 10px;
    /* Opcional: Adiciona um espaço entre os botões (ajuste o valor conforme necessário) */
    align-items: center;
    /* Opcional: Alinha os itens verticalmente ao centro, caso haja diferenças de altura */
}

/* Opcional: Se você quiser que os formulários não ocupem toda a largura do container */
.buttons-container>form {
    margin: 0;
    /* Remove margens padrão dos formulários, se houver */
}

.family-text {
    display: flex;
    /* Ativa o Flexbox */
    align-items: center;
    /* Alinha verticalmente ao centro */
    justify-content: space-between;
    /* Coloca o nome à esquerda e o botão à direita */
}

.delete-family-inline {
    display: inline-block;
    /* Permite que o formulário fique na mesma linha do texto */
    margin: 0;
    /* Remove margens padrão do formulário */
}

.delete-family-inline button {
    margin-left: 10px;
    /* Adiciona um espaço entre o nome e o botão */
}

/* Elegant section title with line below */
.section-title {
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 2px;
    background-color: #064420;
}

.icon-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
/* ================== Enhanced Modern Stepper ================== */
.modern-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    width: 100%;
    position: relative;
    max-width: 1200px;
    margin: 0 auto 2.5rem;
  }
  
  /* Progress line connecting the steps */
  .modern-stepper::before {
    content: '';
    position: absolute;
    top: 26px; /* Centers with the circles */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #e6e6e6;
    z-index: 1;
  }
  
  /* Progress line that fills based on completion */
  .modern-stepper::after {
    content: '';
    position: absolute;
    top: 26px;
    left: 0;
    height: 3px;
    background-color: #02220f;
    z-index: 2;
    transition: width 0.5s ease;
    width: calc((100% / 9) * var(--active-step, 1));
  }
  
  .stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3; /* Above the lines */
    transition: transform 0.2s ease;
  }
  
  .stepper-item:hover {
    transform: translateY(-3px);
  }
  
  .step-counter {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #777;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #fff;
    transition: all 0.3s ease;
    position: relative;
  }
  
  /* Number icon inside the counter */
  .step-counter::before {
    content: attr(data-step);
  }
  
  .stepper-item.active .step-counter {
    background-color: #02220f;
    color: #fff;
    box-shadow: 0 4px 12px rgba(6, 68, 32, 0.3);
    transform: scale(1.1);
  }
  
  .stepper-item.completed .step-counter {
    background-color: #02220f;
    color: #fff;
  }
  
  /* Checkmark for completed steps */
  .stepper-item.completed .step-counter::before {
    content: '✓';
    font-size: 1.4rem;
  }
  
  .step-name {
    margin-top: 0.8rem;
    font-weight: 500;
    text-align: center;
    max-width: 100px;
    color: #777;
    font-size: 0.85rem;
    transition: color 0.3s ease;
    white-space: nowrap;
  }
  
  .stepper-item.active .step-name {
    color: #064420;
    font-weight: 600;
  }
  
  .stepper-item.completed .step-name {
    color: #02220f;
  }
  
  /* Optional sub-text for additional information */
  .step-subtext {
    font-size: 0.7rem;
    color: #999;
    margin-top: 0.3rem;
    text-align: center;
    max-width: 90px;
  }
  
  /* Mobile responsive adjustments */
  @media (max-width: 768px) {
    .modern-stepper {
      overflow-x: auto;
      justify-content: flex-start;
      padding-bottom: 1rem;
    }
    
    .stepper-item {
      flex: 0 0 auto;
      margin-right: 2rem;
    }
    
    .step-counter {
      width: 45px;
      height: 45px;
      font-size: 1rem;
    }
    
    .step-name {
      font-size: 0.75rem;
    }
  }
  
  /* Animation for completion effect */
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  .stepper-item.just-completed .step-counter {
    animation: pulse 0.5s ease-in-out;
  }

/* ===================== Compact Family Toggle Styles ===================== */

.family-toggle-inline {
  border-left: 1px solid #e9ecef;
  padding-left: 1rem;
}

.family-toggle-label {
  font-size: 12px;
  font-weight: 500;
  color: #6c757d;
  margin: 0;
  white-space: nowrap;
}

.compact-toggle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.compact-toggle-wrapper {
  position: relative;
  display: inline-block;
}

.compact-toggle-input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.compact-toggle-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: linear-gradient(145deg, #e9ecef, #f8f9fa);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.compact-toggle-slider:hover {
  background: linear-gradient(145deg, #dee2e6, #f1f3f4);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.compact-toggle-button {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 2px;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Active state */
.compact-toggle-input:checked + .compact-toggle-slider {
  background: linear-gradient(145deg, #02220f, #0d4d23);
  border-color: #02220f;
}

.compact-toggle-input:checked + .compact-toggle-slider .compact-toggle-button {
  transform: translateX(20px);
}


/* Alternative approach for better browser compatibility */
.compact-toggle-input[value="1"]:checked ~ .compact-toggle-slider {
  background: linear-gradient(145deg, #02220f, #0d4d23);
  border-color: #02220f;
}

.compact-toggle-input[value="1"]:checked ~ .compact-toggle-slider .compact-toggle-button {
  transform: translateX(20px);
  box-shadow: 
    0 2px 6px rgba(2, 34, 15, 0.2),
    0 1px 3px rgba(2, 34, 15, 0.1);
}

.compact-status-text {
  font-size: 10px;
  font-weight: 500;
  color: #6c757d;
  transition: color 0.3s ease;
  white-space: nowrap;
}

.compact-toggle-input[value="1"]:checked ~ .compact-toggle-slider ~ .compact-status-text {
  color: #02220f;
}

/* Focus states for accessibility */
.compact-toggle-input:focus + .compact-toggle-input + .compact-toggle-slider,
.compact-toggle-input:focus ~ .compact-toggle-slider {
  outline: 2px solid rgba(2, 34, 15, 0.2);
  outline-offset: 2px;
}

/* Enhanced checkbox styling */
.match-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.match-cb {
  width: 18px;
  height: 18px;
  border: 2px solid #6c757d;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  background-color: white;
  appearance: none;
  -webkit-appearance: none;
   box-sizing: border-box;      /* width includes the 2-px border */
  display: block;              /* prevents tiny inline-spacing artefacts */
}

.match-cb:hover {
  border-color: #198754;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.1);
}

.match-cb:checked {
  background-color: #198754;
  border-color: #198754;
}

.match-cb:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

/* Enhanced row styling */
tr.matched-row {
  background-color: #d1e7dd !important;
  transition: all 0.25s ease;
  box-shadow: inset 3px 0 0 #198754;
}

tr.matched-row:hover {
  background-color: #c3e6cb !important;
}

tr.partial-row {
  opacity: 0.55;
  transition: opacity 0.25s ease;
}

tr.partial-row:hover {
  opacity: 0.75;
}

/* Smooth transitions for table rows */
.table tbody tr {
  transition: all 0.25s ease;
}

.table tbody tr:hover {
  background-color: #f8f9fa;
}

/* Status indicators */
.match-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  transition: all 0.25s ease;
}

.match-status.matched {
  background-color: #198754;
  box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
}

.match-status.unmatched {
  background-color: #6c757d;
}
/*  --- one universal class for the first column ---  */
.match-col {
  /* identical width everywhere */
  width: 28px;           /* ← tweak if you prefer */
  min-width: 28px;
  max-width: 28px;

  padding: 4px 0 !important;   /* kill the lateral 0.75 rem */
  text-align: center;          /* centre the checkbox */
}

/* AI Modal specific table styling */
#aiResult table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    background-color: #FFFFFF;
}

#aiResult table thead th {
    background-color: #02220f;
    color: #FFFFFF;
    padding: 0.75rem;
    text-align: left;
    border-bottom: none;
}

#aiResult table tbody td {
    padding: 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    color: #000000;
}

#aiResult table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

#aiResult h3 {
    color: #02220f;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 600;
}

#aiResult ul {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

#aiResult strong {
    color: #02220f;
}

/* AI Modal header styling */
#aiAnalysisModal .modal-header {
    background-color: #02220f; /* Your dark green theme */
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#aiAnalysisModal .modal-title {
    color: #FFFFFF;
}

#aiAnalysisModal .btn-close {
    filter: invert(1); /* Makes the close button white */
}
#aiResult h3 {
    border-left: 4px solid #064420;
    padding-left: 1rem;
    margin: 2rem 0 1rem 0;
}

#aiResult .list-unstyled li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f2f5;
}

#aiResult .list-unstyled li:last-child {
    border-bottom: none;
}
#aiResult table {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

#aiResult table tbody tr:hover {
    background-color: rgba(6, 68, 32, 0.05);
    transition: background-color 0.2s ease;
}
#aiLoading {
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 3rem 1rem;
}

#aiLoading .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-color: #02220f;
    border-right-color: transparent;
}
#copyAiResult {
    transition: all 0.3s ease;
}

#copyAiResult:hover {
    background-color: #02220f;
    color: white;
    border-color: #02220f;
}

#aiResult {
    line-height: 1.6;
    font-size: 0.95rem;
}

#aiResult strong {
    font-weight: 600;
}

#aiResult .text-success {
    background-color: rgba(40, 167, 69, 0.1);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}
#aiAnalysisModal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#aiAnalysisModal.fade .modal-dialog {
    transition: transform 0.4s ease-out;
}
/* Larger modal for better content viewing */
@media (min-width: 768px) {
    #aiAnalysisModal .modal-dialog {
        max-width: 800px;
    }
}

/* Better mobile experience */
@media (max-width: 767px) {
    #aiAnalysisModal .modal-dialog {
        margin: 0.5rem;
        max-width: none;
        width: auto;
    }
    
    #aiResult table {
        font-size: 0.85rem;
    }
}
/* === AI Chat (scoped) ============================================== */
.ai-chat-root{position:fixed;bottom:24px;right:24px;z-index:1050;font-family:inherit}

/* Bubble */
.ai-chat-root .ai-chat-bubble{position:relative;margin-bottom:16px}
.ai-chat-root .ai-chat-bubble button{
  width:64px;height:64px;border:none;border-radius:50%;
  background:linear-gradient(135deg,#1e293b 0%,#4c1d95 70%,#6366f1 100%);color:#fff;
  font-size:24px;cursor:pointer;box-shadow:0 8px 32px rgba(30,41,59,.3);
  transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden
}
.ai-chat-root .ai-chat-bubble button::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);
  opacity:0;transition:opacity .3s ease
}
.ai-chat-root .ai-chat-bubble button::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.1) 50%,transparent 100%);
  transition:left 0.6s ease;z-index:1;
}
.ai-chat-root .ai-chat-bubble button:hover{
  transform:translateY(-2px) scale(1.05);
  background:linear-gradient(135deg,#0f172a 0%,#581c87 70%,#4f46e5 100%);
  box-shadow:0 12px 40px rgba(76,29,149,.4),0 0 20px rgba(99,102,241,.1)
}
.ai-chat-root .ai-chat-bubble button:hover::before{opacity:1}
.ai-chat-root .ai-chat-bubble button:hover::after{left:100%}
.ai-chat-root .ai-chat-bubble button:active{transform:translateY(0) scale(.98)}

/* Panel */
.ai-chat-root .ai-chat-panel{
  position:absolute;bottom:80px;right:0;width:380px;height:500px;background:#fff;border-radius:16px;
  box-shadow:0 24px 64px rgba(0,0,0,.15);display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transform:translateY(20px) scale(.95);transition:all .3s cubic-bezier(.4,0,.2,1);
  border:1px solid rgba(30,41,59,.1);overflow:hidden
}
.ai-chat-root .ai-chat-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Header */
.ai-chat-root .ai-chat-header{
  padding:20px 24px 16px;background:linear-gradient(135deg,#1e293b 0%,#4c1d95 70%,#6366f1 100%);color:#fff;
  display:flex;justify-content:space-between;align-items:center
}
.ai-chat-root .ai-chat-header strong{font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.ai-chat-root .ai-chat-close{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;
  padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(10px)
}
.ai-chat-root .ai-chat-close:hover{background:rgba(255,255,255,.25);transform:translateY(-1px)}

/* Body */
.ai-chat-root .ai-chat-body{flex:1;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.ai-chat-root .ai-chat-body::-webkit-scrollbar{width:4px}
.ai-chat-root .ai-chat-body::-webkit-scrollbar-track{background:#f1f5f9}
.ai-chat-root .ai-chat-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
.ai-chat-root .ai-chat-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* Messages */
.ai-chat-root .ai-msg{display:flex;flex-direction:column;max-width:85%;animation:ai-msg-in .3s ease-out}
.ai-chat-root .ai-msg.assistant{align-self:flex-start}
.ai-chat-root .ai-msg.user{align-self:flex-end}
.ai-chat-root .message-content{
  padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5;position:relative
}
.ai-chat-root .ai-msg.assistant .message-content{
  background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);color:#1e293b;border-bottom-left-radius:4px;
  border:1px solid rgba(30,41,59,.1)
}
.ai-chat-root .ai-msg.user .message-content{
  background:linear-gradient(135deg,#1e293b 0%,#4c1d95 70%,#6366f1 100%);color:#fff;border-bottom-right-radius:4px
}
.ai-chat-root .message-time{font-size:11px;opacity:.6;margin-top:4px;padding:0 4px;color:#64748b}
.ai-chat-root .ai-msg.assistant .message-time{color:#1e293b}

/* Typing */
.ai-chat-root .typing-indicator{
  display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
  border-radius:16px;border-bottom-left-radius:4px;border:1px solid rgba(30,41,59,.1);max-width:85%;align-self:flex-start
}
.ai-chat-root .typing-dots{display:flex;gap:3px}
.ai-chat-root .typing-dot{width:6px;height:6px;background:#4c1d95;border-radius:50%;animation:ai-typing 1.4s infinite ease-in-out}
.ai-chat-root .typing-dot:nth-child(1){animation-delay:-.32s}
.ai-chat-root .typing-dot:nth-child(2){animation-delay:-.16s}

/* Footer */
.ai-chat-root .ai-chat-footer{padding:20px 24px;background:#fafbfc;border-top:1px solid #e2e8f0;display:flex;gap:12px;align-items:center}
.ai-chat-root .ai-chat-input{
  flex:1;padding:12px 16px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:14px;background:#fff;transition:all .2s ease;outline:none
}
.ai-chat-root .ai-chat-input:focus{border-color:#4c1d95;box-shadow:0 0 0 3px rgba(76,29,149,.1)}
.ai-chat-root .ai-chat-input::placeholder{color:#94a3b8}
.ai-chat-root .ai-chat-send{
  padding:12px 20px;background:linear-gradient(135deg,#1e293b 0%,#4c1d95 70%,#6366f1 100%);color:#fff;border:none;border-radius:12px;
  font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;position:relative;overflow:hidden
}
.ai-chat-root .ai-chat-send::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.1) 50%,transparent 100%);
  transition:left 0.6s ease;z-index:1;
}
.ai-chat-root .ai-chat-send:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#0f172a 0%,#581c87 70%,#4f46e5 100%);
  box-shadow:0 4px 16px rgba(76,29,149,.3),0 0 20px rgba(99,102,241,.1)
}
.ai-chat-root .ai-chat-send:hover::after{left:100%}
.ai-chat-root .ai-chat-send:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ai-chat-root .ai-chat-send span{position:relative;z-index:2}

/* Markdown tweaks inside messages */
.ai-chat-root .markdown-body h3{font-size:1rem;margin:.5rem 0 .25rem}
.ai-chat-root .markdown-body ul{padding-left:1.1rem;margin:.25rem 0 .5rem}
.ai-chat-root .markdown-body li{margin:.125rem 0}
.ai-chat-root .markdown-body p{margin:.25rem 0}

/* === AI Chat — sizing upgrades ==================================== */
.ai-chat-root{
  /* controles rápidos */
  --chat-w: min(520px, 92vw);
  --chat-h: min(72vh, 760px);
}

/* Painel maior (desktop & tablets) */
.ai-chat-root .ai-chat-panel{
  width: var(--chat-w);
  height: var(--chat-h);
}

/* Header fica fixo no topo do painel; mantém ações visíveis */
.ai-chat-root .ai-chat-header{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Melhorias de rolagem no corpo */
.ai-chat-root .ai-chat-body{
  overscroll-behavior: contain;
  min-height: 0;
}

/* Touch target maior p/ mobile */
.ai-chat-root .ai-chat-close{ padding:8px 14px; }

/* ===== Full-screen automático em mobile (quando .open) ===== */
@media (max-width: 768px){
  /* quando aberto, cobre a tela inteira */
  .ai-chat-root .ai-chat-panel.open{
    position: fixed;
    inset: 0;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;           /* fallback */
    height: 100dvh;          /* viewport dinâmica p/ mobile */
    border-radius: 0;
    transform: none;         /* já animou ao abrir */
  }

  /* ajusta áreas seguras (notch/barras) */
  .ai-chat-root .ai-chat-header{
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .ai-chat-root .ai-chat-footer{
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* esconde o bubble enquanto o painel full-screen estiver aberto */
  .ai-chat-root:has(.ai-chat-panel.open) .ai-chat-bubble{ display: none; }
}

/* ===== Utilitário opcional: forçar full-screen em qualquer viewport ===== */
.ai-chat-root .ai-chat-panel.fullscreen{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;   /* fallback */
  height: 100dvh !important;  /* viewport dinâmica */
  border-radius: 0 !important;
  transform: none !important;
}

/* Ajuste visual em telas grandes */
@media (min-width: 1400px){
  .ai-chat-root{ --chat-w: 560px; --chat-h: 74vh; }
}

/* Pequenas melhorias de leitura quando a janela é ampla */
@media (min-width: 992px){
  .ai-chat-root .ai-msg{ max-width: 88%; }
}

/* Animations + responsive */
@keyframes ai-msg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ai-typing{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
@media (max-width:480px){
  .ai-chat-root{bottom:16px;right:16px}
  .ai-chat-root .ai-chat-panel{width:calc(100vw - 32px);height:80vh;bottom:80px;right:-8px}
  .ai-chat-root .ai-chat-bubble button{width:56px;height:56px;font-size:20px}
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .family-toggle-section {
    margin: 1rem 0;
  }
  
  .compact-toggle-slider {
    width: 40px;
    height: 22px;
  }
  
  .compact-toggle-button {
    height: 16px;
    width: 16px;
  }
  
  .compact-toggle-input[value="1"]:checked ~ .compact-toggle-slider .compact-toggle-button {
    transform: translateX(18px);
  }
}
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    #flash-container {
        right: 10px;
        left: 10px;
        max-width: none;
        top: 60px;
    }
}
/* =============== End of styles.css =============== */