:root {
  --bg-main: #f8fafc;
  --text-main: #0f172a;
  --card-bg: #ffffff;
  --card-subtle: #f1f5f9;
  --border-clr: #e2e8f0;
  --table-head-bg: #f1f5f9;
  --table-head-text: #475569;
  --table-hover: #f8fafc;
  --input-bg: #ffffff;
  --muted-text: #64748b;
  --terminal-bg: #0f172a;
  --terminal-text: #38bdf8;
  --dialog-bg: #ffffff;
}

html.dark {
  --bg-main: #09090b;
  --text-main: #fafafa;
  --card-bg: #121215;
  --card-subtle: #18181b;
  --border-clr: #27272a;
  --table-head-bg: #18181b;
  --table-head-text: #a1a1aa;
  --table-hover: #1c1c22;
  --input-bg: #18181b;
  --muted-text: #a1a1aa;
  --terminal-bg: #09090b;
  --terminal-text: #38bdf8;
  --dialog-bg: #121215;
}

body { background-color: var(--bg-main); color: var(--text-main); font-family: 'Inter', sans-serif; letter-spacing: -0.01em; transition: background-color 0.2s ease, color 0.2s ease; }
.shadcn-card { background-color: var(--card-bg); border: 1px solid var(--border-clr); border-radius: 0.75rem; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05); }
html.dark .shadcn-card { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5); }

/* Table Dark/Light Styles */
table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; border-color: var(--border-clr) !important; }
table.dataTable thead th { background-color: var(--table-head-bg) !important; color: var(--table-head-text) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid var(--border-clr) !important; padding: 10px 16px !important; }
table.dataTable tbody td { background-color: var(--card-bg) !important; color: var(--text-main) !important; border-bottom: 1px solid var(--border-clr) !important; font-size: 13px !important; padding: 12px 16px !important; }
table.dataTable tbody tr:hover td { background-color: var(--table-hover) !important; }

.dataTables_wrapper .dataTables_filter input { background-color: var(--input-bg) !important; border: 1px solid var(--border-clr) !important; color: var(--text-main) !important; border-radius: 0.375rem !important; padding: 6px 12px !important; font-size: 12px !important; outline: none !important; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 1px #3b82f6 !important; }
.dataTables_wrapper .dataTables_length select { background-color: var(--input-bg) !important; border: 1px solid var(--border-clr) !important; color: var(--text-main) !important; border-radius: 0.375rem !important; padding: 4px 8px !important; font-size: 12px !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--muted-text) !important; font-size: 12px !important; margin-top: 14px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--muted-text) !important; border-radius: 0.375rem !important; border: 1px solid transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--table-head-bg) !important; color: var(--text-main) !important; border-color: var(--border-clr) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--table-hover) !important; color: var(--text-main) !important; }

.log-terminal { background-color: var(--terminal-bg); border: 1px solid var(--border-clr); font-family: 'JetBrains Mono', monospace; font-size: 11px; border-radius: 0.5rem; height: 260px; overflow-y: auto; padding: 12px; }

/* Status Ping */
.status-ping { width: 8px; height: 8px; border-radius: 50%; display: inline-block; position: relative; }
.status-ping::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; opacity: 0.75; }
.ping-active { background-color: #22c55e; box-shadow: 0 0 10px #22c55e; }
.ping-active::after { border: 1px solid #22c55e; animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.ping-inactive { background-color: #ef4444; box-shadow: 0 0 10px #ef4444; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 767px) {
  /* Table -> Card layout on mobile */
  #acc-table thead { display: none !important; }
  #acc-table, #acc-table tbody, #acc-table tr, #acc-table td { display: block !important; width: 100% !important; box-sizing: border-box !important; }
  #acc-table tr {
    margin-bottom: 0.5rem !important;
    border: 1px solid var(--border-clr) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    background-color: var(--card-bg) !important;
  }
  #acc-table td {
    padding: 0.3rem 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
  }
  #acc-table td:first-child {
    padding-bottom: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    border-bottom: 1px dashed var(--border-clr) !important;
    justify-content: flex-start !important;
    font-size: 13px !important;
  }
  #acc-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--muted-text);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 90px;
    flex-shrink: 0;
  }
  #acc-table td:first-child::before { display: none; }

  /* sent-table card layout */
  #sent-table thead { display: none !important; }
  #sent-table, #sent-table tbody, #sent-table tr, #sent-table td { display: block !important; width: 100% !important; box-sizing: border-box !important; }
  #sent-table tr {
    margin-bottom: 0.5rem !important;
    border: 1px solid var(--border-clr) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
    background-color: var(--card-bg) !important;
  }
  #sent-table td {
    padding: 0.3rem 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    word-break: break-all !important;
  }
  #sent-table td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--muted-text);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 80px;
    flex-shrink: 0;
  }

  /* DataTables search full width */
  .dataTables_wrapper .dataTables_filter { width: 100% !important; text-align: left !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 0 !important; }
  .dataTables_wrapper .dataTables_length { display: none !important; }

  /* Log terminal shorter on mobile */
  .log-terminal { height: 180px !important; font-size: 10px !important; }

  /* SMTP pool badges wrap */
  #smtp-acc-badges { gap: 0.35rem !important; }
  #smtp-acc-badges > span { font-size: 10px !important; padding: 0.2rem 0.4rem !important; }

  /* Body less padding on mobile */
  body { padding: 0.75rem !important; }

  /* Overflow hidden on all containers */
  .overflow-x-auto { overflow-x: hidden !important; }
}