.mailbox-list {
  width: 100%;
  max-width: 600px;
  font-family: Arial, sans-serif;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.mailbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.15s ease;
}

.mailbox:last-child {
  border-bottom: none;
}

.mailbox:hover {
  background-color: #f9fafb;
}

.mailbox-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}

.last-pull {
  font-size: 13px;
  color: #6b7280;
}

/* Status indicator */
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Last pull < 30 minutes */
.status-dot.green {
  background-color: #22c55e;
  box-shadow: 0 0 0 3px #dcfce7;
}

/* Last pull > 30 minutes and <= 1 hour */
.status-dot.amber {
  background-color: #f59e0b;
  box-shadow: 0 0 0 3px #fef3c7;
}

/* Last pull > 1 hour */
.status-dot.red {
  background-color: #ef4444;
  box-shadow: 0 0 0 3px #fee2e2;
}


.mailbox-status-page {
  --mailbox-border-color: rgba(84, 84, 84, 0.2);
  --mailbox-muted-text: #6c757d;
  --mailbox-header-background: var(--bs-table-background-color, #f1f1f1);
  --mailbox-row-background: var(--bg-color, #ffffff);
  --mailbox-striped-background: var(--striped-table-color, #fafafa);
  --mailbox-card-background: var(--bs-section-background-color, #f1f1f1);

  --mailbox-red: #dc3545;
  --mailbox-red-text: #a61e2b;
  --mailbox-red-background: rgba(220, 53, 69, 0.12);
  --mailbox-red-border: rgba(220, 53, 69, 0.35);

  --mailbox-amber: #e5a000;
  --mailbox-amber-text: #795400;
  --mailbox-amber-background: rgba(255, 193, 7, 0.16);
  --mailbox-amber-border: rgba(229, 160, 0, 0.4);

  --mailbox-green: #198754;
  --mailbox-green-text: #146c43;
  --mailbox-green-background: rgba(25, 135, 84, 0.12);
  --mailbox-green-border: rgba(25, 135, 84, 0.35);

  width: 100%;
  padding: 1rem 0 1.5rem;
  color: var(--font-color);
}


[data-theme="dark"] .mailbox-status-page {
  --mailbox-border-color: rgba(255, 255, 255, 0.13);
  --mailbox-muted-text: #adb5bd;

  --mailbox-red-text: #ff9098;
  --mailbox-red-background: rgba(220, 53, 69, 0.19);
  --mailbox-red-border: rgba(255, 103, 115, 0.42);

  --mailbox-amber-text: #ffd166;
  --mailbox-amber-background: rgba(255, 193, 7, 0.16);
  --mailbox-amber-border: rgba(255, 209, 102, 0.38);

  --mailbox-green-text: #80d9a1;
  --mailbox-green-background: rgba(25, 135, 84, 0.2);
  --mailbox-green-border: rgba(128, 217, 161, 0.38);
}


.mailbox-status-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.mailbox-status-heading {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.mailbox-status-title {
  width: 100%;
  margin: 0 0 0.25rem;
  color: var(--font-color);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left !important;
}

.mailbox-status-description {
  margin: 0;
  color: var(--mailbox-muted-text);
  font-size: 0.88rem;
  text-align: left;
}

.mailbox-status-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.mailbox-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.35rem 0.58rem;
  border: 1px solid var(--mailbox-border-color);
  border-radius: 50rem;
  background-color: var(--mailbox-card-background);
  color: var(--font-color);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.mailbox-status-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--mailbox-border-color);
  border-radius: 9px;
  background-color: var(--mailbox-card-background);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.12),
    0 0 8px rgba(184, 224, 187, 0.14);
}

.mailbox-status-table-scroll {
  width: 100%;
  max-height: calc(100vh - 245px);
  overflow: auto;
}


.mailbox-status-table {
  width: 100%;
  min-width: 1180px;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--font-color);
  font-size: 0.82rem;
}

.mailbox-status-table th,
.mailbox-status-table td {
  padding: 0.85rem 0.9rem;
  border-right: 1px solid var(--mailbox-border-color);
  border-bottom: 1px solid var(--mailbox-border-color);
  vertical-align: middle;
  text-align: left;
}

.mailbox-status-table th:last-child,
.mailbox-status-table td:last-child {
  border-right: 0;
}

.mailbox-status-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--mailbox-header-background);
  color: var(--font-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.mailbox-status-table tbody td {
  background-color: var(--mailbox-row-background);
}

.mailbox-status-table tbody tr:nth-child(even) td {
  background-color: var(--mailbox-striped-background);
}

.mailbox-status-table tbody tr:last-child td {
  border-bottom: 0;
}

.mailbox-status-table time {
  white-space: nowrap;
}

.mailbox-status-table th:first-child,
.mailbox-status-table td:first-child {
  width: 76px;
  min-width: 76px;
  text-align: center;
}

.mailbox-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  color: transparent !important;
  font-size: 0 !important;
}

.mailbox-status-indicator .status-name {
  display: none !important;
}

.mailbox-address {
  max-width: 230px;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailbox-empty-value {
  color: var(--mailbox-muted-text);
  font-style: italic;
}

.status-dot {
  display: inline-block;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(108, 117, 125, 0.25);
  border-radius: 50%;
  background-color: #6c757d;
  box-shadow: 0 0 0 4px rgba(108, 117, 125, 0.12);
}

.status-dot.danger,
.status-dot.critical {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: var(--mailbox-red);
  box-shadow: 0 0 0 4px var(--mailbox-red-background);
}

.status-dot.warning {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: var(--mailbox-amber);
  box-shadow: 0 0 0 4px var(--mailbox-amber-background);
}

.status-dot.healthy {
  border-color: rgba(255, 255, 255, 0.55);
  background-color: var(--mailbox-green);
  box-shadow: 0 0 0 4px var(--mailbox-green-background);
}


.mailbox-status-message {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--mailbox-border-color);
  border-radius: 50rem;
  color: var(--mailbox-muted-text);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.mailbox-status-message.danger,
.mailbox-status-message.critical {
  border-color: var(--mailbox-red-border);
  background-color: var(--mailbox-red-background);
  color: var(--mailbox-red-text);
}

.mailbox-status-message.warning {
  border-color: var(--mailbox-amber-border);
  background-color: var(--mailbox-amber-background);
  color: var(--mailbox-amber-text);
}

.mailbox-status-message.healthy {
  border-color: var(--mailbox-green-border);
  background-color: var(--mailbox-green-background);
  color: var(--mailbox-green-text);
}


.mailbox-status-table tbody tr,
.mailbox-status-table tbody tr:hover {
  --bs-table-hover-bg: transparent !important;
  --bs-table-hover-color: inherit !important;
  --bs-table-accent-bg: transparent !important;

  cursor: default !important;
}

.mailbox-status-table tbody tr:nth-child(odd):hover td {
  background-color: var(--mailbox-row-background) !important;
}

.mailbox-status-table tbody tr:nth-child(even):hover td {
  background-color: var(--mailbox-striped-background) !important;
}

.mailbox-status-table tbody tr:hover td {
  color: var(--font-color) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


.mailbox-no-data-row td {
  padding: 1.25rem;
  color: var(--mailbox-muted-text);
  font-style: italic;
  text-align: center;
}


@media (max-width: 992px) {
  .mailbox-status-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .mailbox-status-table-scroll {
    max-height: calc(100vh - 285px);
  }
}

@media (max-width: 576px) {
  .mailbox-status-page {
    padding-top: 0.65rem;
  }

  .mailbox-status-title {
    font-size: 1.2rem;
  }

  .mailbox-status-table th,
  .mailbox-status-table td {
    padding: 0.72rem;
  }
}