.loader{border-top-color: #2563eb}
.dataTables_wrapper {
  background: transparent;
  border: none;
}

/* Remove the two dark horizontal lines and use light Tailwind-like separators */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
table.dataTable thead th {
  border-bottom: 1px solid #e5e7eb; /* tailwind-gray-200 */
  background: transparent;
}
table.dataTable tbody td {
  border-bottom: 1px solid transparent;
}

/* Paging / search bar tidy */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
  margin: 0 0 1rem 0;
  border-top: none;
}

/* Make actions column buttons visible and consistent */
.btn-delete {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: #dc2626; /* red-600 */
  color: #ffffff;
  border: 1px solid #b91c1c;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  text-decoration: none;
}
.btn-delete svg { width: 16px; height: 16px; fill: currentColor; }
.btn-delete:disabled { opacity: 0.6; cursor: not-allowed; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  width: 100%;
  text-align: left;
  color: #374151; /* gray-700 */
  border-left: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  background: transparent;
}
/* Active tab: left blue border + subtle blue background + stronger text */
.tab-btn.active,
.tab-btn[aria-selected="true"] {
  background-color: #eff6ff; /* blue-50 */
  border-left-color: #2563eb; /* blue-600 */
  color: #1e40af; /* blue-900 */
  font-weight: 600;
}

/* small responsive tweak for tab icons/text */
.tab-btn svg { flex-shrink: 0; }

a.session-link {
  text-decoration: none;
  color: #1d4ed8; /* blue-700 */
  white-space: normal; /* allow wrapping if needed, but we'll use monospace for readability */
}
a.session-link:hover {
  text-decoration: underline;
  color: #1e40af; /* blue-800 */
}

/* Monospace session column so long ids are readable and align numerically */
.mono-session, a.session-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  word-break: break-all; /* ensures very long ids won't overflow container */
}

/* Polished refresh button fallback style (main.js also adds classes) */
#refreshLogsBtn {
  cursor: pointer;
}

/* Tab active left-border look (keeps compatibility with main.js .tab-active classes) */
.tab-active { background-color: #eef2ff; border-left-width: 4px; border-left-color: #2563eb; color: #1e3a8a; font-weight: 600; }
.tab-inactive { color: #4b5563; }

/* small styling for login password toggle button */
#togglePasswordBtn { line-height: 0; border: none; background: transparent; padding: 0.15rem; }
#togglePasswordBtn:hover { color: #374151; } /* subtle hover */
#loginError { white-space: normal; }

.hidden { display: none !important; }

/* Input-with-toggle: wrapper around password input + toggle button */
.input-with-toggle { position: relative; display: block; }
/* Make the input reserve space on the right for the toggle button */
.input-with-toggle input[type="password"],
.input-with-toggle input[type="text"] {
  box-sizing: border-box;
  padding-right: 2.5rem; /* room for 1.75rem button + spacing */
}

/* Position the toggle button inside the input area */
#togglePasswordBtn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #6b7280; /* gray-500 */
}
#togglePasswordBtn:hover { color: #374151; } /* gray-700 */

/* Make sure the eye icons size and align */
#togglePasswordBtn svg { height: 1rem; width: 1rem; line-height: 0; pointer-events: none; }

/* Flash messages: add a consistent class for easier JS handling */
.flash-message { transition: opacity .25s ease, transform .2s ease; }
.flash-message.hide { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* Small safety: ensure loginError box wraps text and isn't persistent visually */
#loginError { white-space: normal; }

#togglePasswordBtn { line-height: 0; padding: 0.25rem; }

/* keep the button from changing layout when toggling icons */
#togglePasswordBtn .hidden { display: none !important; }
#togglePasswordBtn svg { vertical-align: middle; }

/* Ensure stable icon sizing and avoid stroke clipping */
.toggle-eye {
  display: block;
  width: 1.25rem;    /* same as h-5 w-5 */
  height: 1.25rem;
  overflow: visible; /* allow strokes that slightly exceed viewBox */
  vector-effect: non-scaling-stroke; /* keep stroke width consistent when scaled */
}

/* MCP modal: constrained width, centered and responsive */
.mcp-modal-panel {
  /* keep panel size controlled even if utility classes are missing */
  width: min(95%, 760px);   /* adapt to small screens, cap to 760px */
  margin: 2.5rem auto;      /* vertical breathing room */
  box-sizing: border-box;
  max-width: 760px;
  border-radius: 12px;
  overflow: hidden;
  /* visual polish */
  box-shadow: 0 12px 30px rgba(16,24,40,0.15);
}

/* Ensure wrapper keeps vertical centering on taller viewports */
#mcpModal > .relative { min-height: 100vh; }

/* Modal header spacing / vertical centering */
.mcp-modal-header {
  padding-left: 1.25rem;  /* px-6 */
  padding-right: 1.25rem; /* px-6 */
  padding-top: 0.75rem;   /* py-3 */
  padding-bottom: 0.75rem;
  gap: 0.5rem;
}

/* Title small tweak */
.mcp-modal-title { margin: 0; line-height: 1; }

/* Close button consistent size */
.mcp-modal-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

/* Tweak svg inside close to avoid visual distortion */
.mcp-modal-close svg { width: 18px; height: 18px; display: block; }

/* Backdrop smoothing */
.mcp-modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Pre body monospace and spacing */
.mcp-modal-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
}

/* Keep modal visible class consistent with earlier code */
#mcpModal:not(.hidden) { display: block; }