/* ==========================================================================
   Town of Caledon - CKEditor Contact Email Modal Styles
   ========================================================================== */

/* Dialog Container */
.caledon-contacts-email-dialog.ui-dialog,
.ui-dialog:has(#caledon-contacts-dialog-root) {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  width: 820px !important;
  max-width: 95vw !important;
  box-sizing: border-box !important;
}

.caledon-contacts-email-dialog.ui-dialog *,
.ui-dialog:has(#caledon-contacts-dialog-root) * {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Dialog Titlebar */
.caledon-contacts-email-dialog .ui-dialog-titlebar,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-titlebar {
  background: linear-gradient(135deg, #0256a4 0%, #013b70 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  margin: 0 !important;
}

.caledon-contacts-email-dialog .ui-dialog-title,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-title {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  float: none !important;
}

.caledon-contacts-email-dialog .ui-dialog-title::before,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-title::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Titlebar Close Button (Crisp White SVG X Icon) */
.caledon-contacts-email-dialog .ui-dialog-titlebar-close,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-titlebar-close {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: block !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  transition: all 0.15s ease !important;
}

.caledon-contacts-email-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-titlebar-close:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

.caledon-contacts-email-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-titlebar-close .ui-icon {
  display: none !important;
}

/* Dialog Body Content */
.caledon-contacts-email-dialog .ui-dialog-content,
.ui-dialog:has(#caledon-contacts-dialog-root) .ui-dialog-content {
  padding: 18px 20px !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-height: none !important;
}

.caledon-contacts-dialog-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

/* Top Search Bar */
.caledon-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.caledon-search-field-wrapper {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.caledon-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.caledon-search-input {
  width: 100% !important;
  height: 42px !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
  margin: 0 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.caledon-search-input:focus {
  border-color: #0256a4 !important;
  box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15) !important;
}

.caledon-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 13.5px !important;
}

/* Close/Clear Button inside Search Box (Right side) */
.caledon-search-clear-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #e2e8f0 !important;
  border: none !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 22px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  z-index: 2 !important;
}

.caledon-search-clear-btn:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Search Button */
.caledon-btn-search,
.caledon-search-bar button.caledon-btn-search {
  background-color: #0256a4 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #0256a4 !important;
  border-radius: 8px !important;
  padding: 0 20px !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(2, 86, 164, 0.2) !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.caledon-btn-search:hover,
.caledon-search-bar button.caledon-btn-search:hover {
  background-color: #01417a !important;
  border-color: #01417a !important;
}

/* Results Card */
.caledon-contacts-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.caledon-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.caledon-count-label {
  font-weight: 700;
  font-size: 13.5px;
  color: #1e293b;
}

.caledon-total-badge {
  background: #e0f2fe;
  color: #0369a1;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 700;
}

/* Scrollable Table Viewport */
.caledon-table-viewport {
  max-height: 290px;
  overflow-y: auto;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.caledon-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  table-layout: fixed !important;
}

.caledon-table thead th {
  position: sticky !important;
  top: 0 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-top: none !important;
  text-align: left !important;
  z-index: 2 !important;
}

.caledon-table th.col-contact, .caledon-table td.col-contact { width: 50% !important; }
.caledon-table th.col-email,   .caledon-table td.col-email   { width: 36% !important; }
.caledon-table th.col-action,  .caledon-table td.col-action  { width: 14% !important; text-align: right !important; }

.caledon-table tbody tr {
  transition: background-color 0.12s ease !important;
  cursor: pointer !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.caledon-table tbody tr:hover {
  background-color: #f8fafc !important;
}

.caledon-table tbody tr:last-child {
  border-bottom: none !important;
}

.caledon-table tbody td {
  padding: 10px 16px !important;
  vertical-align: middle !important;
  font-size: 14px !important;
  color: #334155 !important;
  border: none !important;
}

/* Name Cell */
.contact-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-name-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.3;
}

.contact-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-section {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Email Cell */
.contact-email-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0256a4;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-email-icon {
  color: #64748b;
  flex-shrink: 0;
}

.contact-email-address {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Select Button in Table (High Specificity) */
.caledon-contacts-dialog-root button.caledon-btn-select,
.caledon-contacts-email-dialog button.caledon-btn-select,
.ui-dialog:has(#caledon-contacts-dialog-root) button.caledon-btn-select,
button.caledon-btn-select {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #0256a4 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid #0256a4 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(2, 86, 164, 0.25) !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  height: auto !important;
}

.caledon-contacts-dialog-root button.caledon-btn-select:hover,
.caledon-contacts-email-dialog button.caledon-btn-select:hover,
.ui-dialog:has(#caledon-contacts-dialog-root) button.caledon-btn-select:hover,
tr:hover button.caledon-btn-select {
  background-color: #438306 !important;
  border-color: #438306 !important;
  color: #ffffff !important;
}

/* Pinned Pager Footer */
.caledon-pager-footer {
  padding: 10px 16px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.caledon-pagination-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.caledon-pagination-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.caledon-page-btn {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.12s ease !important;
  line-height: 1 !important;
}

.caledon-page-btn:hover:not(.disabled) {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0256a4 !important;
}

.caledon-page-btn.is-active {
  background: #0256a4 !important;
  border-color: #0256a4 !important;
  color: #ffffff !important;
}

.caledon-page-btn.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.caledon-page-ellipsis {
  padding: 0 4px;
  color: #94a3b8;
  font-size: 13px;
}

/* Empty State */
.caledon-empty-box {
  padding: 40px 20px;
  text-align: center;
  color: #64748b;
}

.caledon-empty-heading {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.caledon-empty-subtext {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}