/* Default light theme styles */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  background-color: #ffffff;
  color: #000000;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #ddd, 0 0 0 0.25rem #007bff;
}

body {
  margin-bottom: 60px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #ffffff;
  color: #000000;
  padding: 20px;
  padding-bottom: 80px; /* Ensure content is not hidden under the footer */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

h1, h2 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #007bff;
}

h1 {
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

h2 {
  margin-top: 20px;
}

p, ul {
  margin: 10px 0;
}

ul {
  padding-left: 20px;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


footer {
  position: sticky; /* Sticky instead of fixed */
  bottom: 0;
  width: 100%;
  background-color: #f8f9fa;
  color: #000000;
  text-align: center;
  padding: 12px 0; /* Give footer real height */
  border-top: 1px solid #ddd;
  box-sizing: border-box;
  white-space: normal;
}

/* Dark theme styles */
.dark-theme {
  background-color: #121212;
  color: #e0e0e0;
}

.dark-theme a {
  color: #bb86fc;
}

.dark-theme .btn-primary, .dark-theme .btn-success {
  background-color: #bb86fc;
  border-color: #bb86fc;
  color: #121212;
}

.dark-theme .btn-primary:hover, .dark-theme .btn-success:hover {
  background-color: #9b67d3;
  border-color: #7a4bb3;
}

/* Enhancements for SweetAlert2 button spacing */
.swal2-actions .btn-success {
    margin-right: 10px;
}

.dark-theme .form-control {
  background-color: #1f1f1f;
  border: 1px solid #333;
  color: #e0e0e0;
}

.dark-theme .list-group-item {
  background-color: #1f1f1f;
  border: 1px solid #333;
  color: #e0e0e0;
}

.dark-theme .alert {
  background-color: #333;
  color: #e0e0e0;
}

.dark-theme footer {
  background-color: #1f1f1f;
  color: #e0e0e0;
  border-top: 1px solid #333;
}

/* Additional styles for manualNumbersList */
#manualNumbersList {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  background-color: #f8f9fa;
}

#manualNumbersList .list-group-item {
  border: none;
  padding: 8px 10px;
  margin-bottom: 5px;
  background-color: #ffffff;
  border-radius: 3px;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

/* Privacy page specific styles */
.privacy-content {
  padding-left: 20px; /* Add padding on the left */
  padding-right: 20px; /* Add padding on the right */
}

/* Privacy page specific styles */
.privacy-content {
  padding-left: 20px; /* Add padding on the left */
  padding-right: 20px; /* Add padding on the right */
}

#loadedNumbersList {
  height: 250px; /* Adjust this value to fit 10 numbers */
  overflow-y: auto;
}

/* Spinner alignment inside buttons */
#sendButton .spinner-border {
    margin-right: 8px;
    vertical-align: middle;
}

/* SweetAlert button spacing */
.swal2-actions .btn-success {
    margin-right: 10px;
}

/* =========================
   Align Loaded & Rejected lists and headers
   Added to the project's main site.css.
   ========================= */

/* Make the row that contains the two number columns align items to the top.
   Targeting the specific card body area to avoid affecting other rows globally. */
#smsManagementSection .card-body > .row,
.card-body > .row:has( #loadedNumbersList ) {
  align-items: flex-start;
}

/* Apply a consistent "list-wrapper" look to both lists (loaded + rejected).
   We target the list elements directly (ul.list-group) to avoid requiring wrapper markup. */
#loadedNumbersList,
#rejectedNumbersList {
  box-sizing: border-box;
  background: #ffffff; /* keep white background for readability */
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 0;
  list-style: none;
  margin-bottom: 0;
  max-height: 250px; /* consistent height */
  overflow-y: auto;
  /* ensure the lists line up visually with surrounding content */
  box-shadow: none;
}

/* Make list items consistent and flush with the wrapper */
#loadedNumbersList .list-group-item,
#rejectedNumbersList .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 0.65rem 1rem;
  margin: 0;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.95rem;
}

/* Last item should not have a bottom border to match Bootstrap list look */
#loadedNumbersList .list-group-item:last-child,
#rejectedNumbersList .list-group-item:last-child {
  border-bottom: 0;
}

/* Rejected list special styling (so it's visually distinct but not overpowering) */
#rejectedNumbersList .list-group-item {
  background-color: #fbe9eb; /* softer pink */
  color: #6b1e26;
}

/* Export button alignment: keep it visually aligned with the Rejected heading */
.numbers-columns .section-header,
#smsManagementSection .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* title left, controls right */
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* On small screens revert to stacked layout where button flows under the heading */
@media (max-width: 767.98px) {
  .numbers-columns .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  #exportRejectedButton {
    margin-top: 0.25rem;
  }
}


/* Export button: placed naturally in the header, no float, no negative margin */
#exportRejectedButton {
  float: none !important;
  margin-top: 0 !important;
  margin-left: 0.5rem;
  padding: 0.35rem 0.6rem; /* slightly compact */
  line-height: 1;
  border-radius: 0.375rem;
  vertical-align: middle;
  background-color: #6c757d; /* bootstrap secondary */
  color: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  z-index: 1; /* above small borders but kept low so it doesn't look floating */
}

/* If you use btn classes, keep appearance consistent while still preventing overlay */
#exportRejectedButton.btn,
#exportRejectedButton.btn-sm {
  display: inline-block;
}



/* Small visual safety: make sure the heading+control block does not overlap the list's top border.
   Add a tiny top padding to the list container so the heading controls never cover the top edge. */
#rejectedNumbersList,
#loadedNumbersList {
  padding-top: 0.2rem; /* small breathing space */
}

/* Ensure heading spacing is consistent */
#loadedNumbersSection,
#rejectedNumbersSection {
  margin-bottom: 0.45rem;
  font-weight: 600;
}

/* When the screen is narrow, don't float the export button; stack instead */
@media (max-width: 767.98px) {
  #exportRejectedButton {
    float: none;
    margin-top: 0.5rem;
    display: inline-block;
  }
  #loadedNumbersList,
  #rejectedNumbersList {
    max-height: 200px;
  }
}

/* Small visual tweak: ensure the two columns present as top-aligned blocks */
#smsManagementSection .row > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* Guarantee the list wrappers take available vertical space in their column,
   keeping footer and other controls from shifting the lists. */
#smsManagementSection .row > .col-md-6 > ul {
  flex: 0 1 auto;
}

/* Provide a small utility to visually cue empty state */
#loadedNumbersList .list-group-item:empty::before,
#rejectedNumbersList .list-group-item:empty::before {
  content: "—";
  color: #888;
}

/* Accessibility: ensure contrast for rejected items in dark-theme as well */
.dark-theme #rejectedNumbersList .list-group-item {
  background-color: #3b1f22; /* darker pinkish */
  color: #ffd7db;
  border-color: #4a2327;
}

/* ===== append: layout & list alignment for Loaded / Rejected lists =====
   Move this from the view into site.css to avoid Razor @ parsing issues
   and to keep styles centralized. */
.numbers-pane .card {
  border: 0; /* optional: remove outer card border to match list-group look */
}
.numbers-pane .card-header {
  background: transparent;
  border-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.numbers-pane .list-wrapper {
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 0;
  background: transparent;
}

/* make header + button align across columns */
.numbers-columns .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}

/* Slightly reduce the visual weight of danger list-items */
.list-group-item-danger,
#rejectedNumbersList .list-group-item {
  background-color: #f8d7da; /* keep the light pink */
  border-color: #f5c2c7;
  color: #6b1e26;
}

/* ensure the two column containers align to the top */
.numbers-columns.row,
#smsManagementSection .card-body > .row {
  align-items: flex-start;
}

/* Make list items consistent and flush with the wrapper */
#loadedNumbersList .list-group-item,
#rejectedNumbersList .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 0.65rem 1rem;
  margin: 0;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 0.95rem;
}

/* Last item should not have a bottom border to match Bootstrap list look */
#loadedNumbersList .list-group-item:last-child,
#rejectedNumbersList .list-group-item:last-child {
  border-bottom: 0;
}


/* Ensure heading spacing is consistent */
#loadedNumbersSection,
#rejectedNumbersSection {
  margin-bottom: 0.45rem;
  font-weight: 600;
}

/* When the screen is narrow, don't float the export button; stack instead */
@media (max-width: 767.98px) {
  #exportRejectedButton {
    float: none;
    margin-top: 0.5rem;
    display: inline-block;
  }
  #loadedNumbersList,
  #rejectedNumbersList,
  .numbers-pane .list-group {
    max-height: 200px;
  }
}

/* Small visual tweak: ensure the two columns present as top-aligned blocks */
#smsManagementSection .row > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* Guarantee the list wrappers take available vertical space in their column */
#smsManagementSection .row > .col-md-6 > ul {
  flex: 0 1 auto;
}

/* Provide a small utility to visually cue empty state */
#loadedNumbersList .list-group-item:empty::before,
#rejectedNumbersList .list-group-item:empty::before {
  content: "—";
  color: #888;
}

/* Accessibility: ensure contrast for rejected items in dark-theme as well */
.dark-theme #rejectedNumbersList .list-group-item {
  background-color: #3b1f22; /* darker pinkish */
  color: #ffd7db;
  border-color: #4a2327;
}

/* End of alignment and list style enhancements */


/* ============================
   Toast Container + Animations
   ============================ */

#toastHost {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 4000;
    pointer-events: none;
}

.toast {
    min-width: 240px;
    max-width: 520px;
    background: #1f2937;
    color: #fff;
    padding: .75rem 1rem;
    border-radius: .5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: auto;
    animation: toast-in .18s ease-out forwards;
}

.toast.success { background:#065f46; }
.toast.error   { background:#7f1d1d; }
.toast.warning { background:#92400e; }
.toast.info    { background:#1f2937; }

@keyframes toast-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(-10px); }
}


/* ============================
   Modal (showPrompt)
   ============================ */

#modalBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3999;
}

#modal {
    width: min(640px, 92vw);
    background:#fff;
    padding:1rem;
    border-radius:.75rem;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

#modal textarea,
#modal input[type="text"] {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    resize: vertical;
}#modal .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; } #modal .btn { padding: .5rem 1rem; border-radius: .5rem; }

/* ============================
   App Toasts (no Bootstrap conflict)
   ============================ */

#toastHost {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 4000;
  pointer-events: none;
}

.app-toast {
  min-width: 240px;
  max-width: 520px;
  background: #1f2937;  /* dark slate */
  color: #fff;
  padding: .75rem 1rem;
  border-radius: .5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  opacity: 0;                      /* start hidden */
  transform: translateY(-10px);
  pointer-events: auto;
  animation: app-toast-in .18s ease-out forwards; /* fade in */
}

.app-toast.success { background:#065f46; } /* emerald */
.app-toast.error   { background:#7f1d1d; } /* red-900 */
.app-toast.warning { background:#92400e; } /* amber-800 */
.app-toast.info    { background:#1f2937; } /* slate-800 */

@keyframes app-toast-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes app-toast-out {
  to { opacity: 0; transform: translateY(-10px); }
}

/* =========================
   BULK CLIENT BUTTON STANDARDIZATION
   ========================= */

/* ✅ Uniform button size for Bulk Client section only */
#bulkClientSection .btn {
  min-width: 230px;
  height: 42px;
  font-size: 14px;
  font-weight: 500;
}

/* ✅ Proper spacing between grouped buttons */
.bulk-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* ✅ Space between log and buttons below it */
.bulk-log-actions {
  margin-top: 20px;
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

/* ✅ Center bottom action buttons nicely */
.bulk-bottom-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ✅ Ensure consistent alignment in smaller screens */
@media (max-width: 768px) {
  .bulk-btn-group,
  .bulk-log-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #bulkClientSection .btn {
    width: 100%;
    min-width: unset;
  }
}