/* Wrapper for the entire table (acts as the flex container) */
.table-container {
  width: 100%;
  margin-top: 20px;
}

/* The header row for the table (acts as a flex container with header "cells") */
.table-header {
  display: flex;
  background-color: #f8f9fa;
  font-weight: bold;
  border-radius: 12px;
  padding: 8px 24px;
  margin-bottom: 10px;
}

/* Each "cell" inside a row */
.table-cell {
  flex: 1;  /* Distribute space equally among cells */
  padding: 8px 15px;
  text-align: left;
  vertical-align: middle;
}

/* Align last column to the center */
.text-center {
  text-align: center;
}


.text-evenly {
    justify-content: space-evenly!important;
    text-align: justify!important;
  }


/* Each row is a flex container and has styling for card-like look */
.table-row {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #E9ECF2;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 8px 24px;
  margin-bottom: 20px;
  cursor: pointer;
}

/* Optionally, a collapsible section for sender emails (same as the previous solution) */
.collapse-content {
  margin-top: 8px;
}

/* Give the last column more space */
.table-cell:last-child {
  flex: 1.5;
}

@media screen and (max-width: 576px) {

  /* Reset the flex value for the last column */
  .table-cell:last-child {
    flex: 1.5;
    justify-content: space-evenly;
    align-items: center;
  }
    
}


/* Sender Emails - Card Layout */
.sender-emails-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

/* Sender Email Card */
.sender-email-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
}

.sender-email-card:hover {
    border-color: #007bff;
    box-shadow: 4px 6px 12px rgba(0, 123, 255, 0.2);
}

/* Hide the default checkbox */
.hidden-checkbox {
    display: none;
}

/* Selected card styling */
.sender-email-card.selected,
.sender-email-card input[type="checkbox"]:checked + .sender-card-content {
    border-color: #007bff;
    background: rgba(0, 123, 255, 0.1);
}

/* Card content */
.sender-card-content {
    text-align: center;
}

.sender-card-content h5 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 8px;
}

.sender-card-content p {
    font-size: 0.9rem;
    color: #555;
    margin: 2px 0;
}

/* Checkmark icon for selected cards */
.checkmark-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.3rem;
    color: #007bff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sender-email-card.selected .checkmark-icon,
.sender-email-card input[type="checkbox"]:checked + .sender-card-content + .checkmark-icon {
    opacity: 1;
}

/* In the <style> section or your CSS file */
.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item {
    cursor: pointer;
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}



    .leads-container {
        display: flex;          /* Let’s flex them out */
        flex-wrap: wrap;        /* Wrap to next line if needed */
        gap: 15px;              /* Space between cards */
        margin-top: 10px;
    }

    /* Individual Lead Card */
    .lead-card {
        background: #ffffff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        width: 220px;           /* You can adjust the width as you like */
        box-shadow: 2px 4px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
          /* ... your existing styles ... */
        width: 220px; /* or whatever fixed width you're using */
        word-wrap: break-word;          /* older approach */
        overflow-wrap: break-word;      /* modern approach */
    }

    .lead-card:hover {
        box-shadow: 4px 6px 12px rgba(0,0,0,0.15);
    }

    .lead-card h5 {
        margin: 0 0 8px;
        font-size: 1.1rem;
        color: #333;
          /* Also ensure paragraphs/headings break long words */
        overflow-wrap: break-word;
        word-wrap: break-word;
        /* Optional: avoid horizontal scroll by not letting them stay on one line */
        white-space: normal;  
    }

    .lead-card p {
        font-size: 0.9rem;
        color: #555;
        margin: 2px 0;
          /* Also ensure paragraphs/headings break long words */
        overflow-wrap: break-word;
        word-wrap: break-word;
        /* Optional: avoid horizontal scroll by not letting them stay on one line */
        white-space: normal;  
    }






/* Step 5 Custom Styles */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.card-title {
    color: #2c3e50;
    font-size: 1.1rem;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 0.75rem;
}

.form-label.fw-bold {
    color: #4a5568;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.form-control-lg, .form-select-lg {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}

.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.15em;
}

.form-check-label {
    font-size: 0.95rem;
    color: #4a5568;
}

.exclude-day-card {
    flex: 1 0 28%;
    margin: 0.5rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.exclude-day-card:hover {
    border-color: #4299e1;
    background-color: #f8fafc;
}

.exclude-day-card input:checked + span {
    color: #4299e1;
    font-weight: 600;
}

#rich-text-editor- {
    display: none;
}

 /* Rich Text Editor Styles  */

/* Include the same styles as in the sequence module */
.rich-text-editor {
    position: relative;
    overflow: hidden;
    resize: vertical;
    min-height: 500px;
}

.rich-text-editor img {
    max-width: 100%;
    height: auto;
    display: inline;
    cursor: move;
    outline: 2px solid #ccc;
}

.rich-text-editor img[style*="float: left"] {
    margin-right: 10px;
}

.rich-text-editor img[style*="float: right"] {
    margin-left: 10px;
}

.interact-resizable-handle {
    display: none;
}



@media (max-width: 576px) {
    .table-header,
    .table-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .table-cell {
        width: 100%;
        margin-bottom: 1rem;
        text-align: left;
        justify-content: flex-start;
    }
}



button {
    background-color: orange;
    color: #fff;
}