/* App.css (minimal subset) */
body { margin: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
a { color: white; }
h1 { font-size: 3rem; }
.App { color: white; background-color: #000000; display: flex; flex-direction: column; row-gap: 1rem; justify-content: start; align-items: center; height: 100vh; overflow: hidden auto; }
.App > * { max-width: calc(100% - 4rem); }

/* AlertsView.css */
.alerts-container { background: #111; color: #e0e0e0; padding: 20px; min-height: 100vh; font-family: system-ui, sans-serif; }
.alert-tabs { display: flex; gap: 14px; padding-bottom: 10px; border-bottom: 2px solid #333; margin-bottom: 20px; }
.alert-tab { background: none; border: none; padding: 6px 12px; font-size: 15px; cursor: pointer; color: #aaa; }
.alert-tab:hover { color: #fff; }
.alert-tab.active { font-weight: bold; color: #fff; border-bottom: 2px solid #4da3ff; }

/* Toolbar above the table (search bar) */
.table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.alert-search { background: #1e1e1e; border: 1px solid #444; border-radius: 6px; color: #e0e0e0; font-size: 14px; padding: 6px 12px; width: 220px; outline: none; }
.alert-search::placeholder { color: #666; }
.alert-search:focus { border-color: #4da3ff; }

/* Table wrapper for horizontal scroll on mobile */
.alert-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.alert-table { width: 100%; border-collapse: collapse; background: #1a1a1a; border: 1px solid #333; min-width: 600px; }
.alert-table thead th { text-align: left; padding: 12px; font-weight: 600; background: #222; border-bottom: 2px solid #333; color: #ddd; white-space: nowrap; }
.alert-table tbody td { padding: 12px; border-bottom: 1px solid #2e2e2e; color: #ccc; }
.alert-table tbody tr:hover { background: #2a2a2a; cursor: pointer; }
.alert-ticket { color: #4da3ff; text-decoration: none; }
.alert-ticket:hover { text-decoration: underline; }
.severity-row { transition: background-color 0.2s ease; }
.sev-info { background: rgba(80, 150, 255, 0.15); }
.sev-warning { background: rgba(255, 215, 50, 0.18); }
.sev-critical { background: rgba(255, 80, 80, 0.18); }
.sev-unknown { background: rgba(255, 255, 255, 0.05); }
.severity-row:hover { background-color: rgba(255, 255, 255, 0.07); }

/* AlertModal.css */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; justify-content: center; align-items: center; z-index: 5000; }
.modal-content { background: #1a1d22; border: 1px solid #2a2e35; border-radius: 10px; width: 700px; max-width: 95vw; max-height: 85vh; overflow-y: auto; padding: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.6); color: #fff; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a2e35; padding-bottom: 10px; margin-bottom: 20px; }
.modal-close { background: none; border: none; color: #bbb; font-size: 26px; cursor: pointer; }
.modal-close:hover { color: white; }
.modal-section { margin-bottom: 25px; }
.modal-section h3 { margin-bottom: 10px; color: #9eb2ff; }
.modal-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.modal-section-header h3 { margin-bottom: 0; }
.btn-logs-fetch { background: #2a2e35; border: 1px solid #3a3f4a; color: #9eb2ff; padding: 3px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.btn-logs-fetch:hover { background: #3a3f4a; }
.logs-status { color: #888; font-size: 13px; }
.logs-error { color: #ff6b6b; font-size: 13px; margin-bottom: 8px; }
.logs-empty { color: #888; font-size: 13px; }
.logs-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.log-entry { background: #12151a; border: 1px solid #2a2e35; border-radius: 5px; padding: 6px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.log-ts { color: #888; font-family: monospace; }
.log-msg { color: #ddd; font-family: monospace; word-break: break-all; }
.modal-table { width: 100%; border-collapse: collapse; }
.modal-table td { padding: 6px 4px; vertical-align: top; }
.field-name { color: #7f8fa6; width: 180px; }
.field-value { color: #e8e8e8; word-break: break-all; }

/* Mobile responsive */
@media (max-width: 768px) {
  .App > * { max-width: calc(100% - 1rem); }
  .alerts-container { padding: 10px; }
  .alert-tabs { gap: 6px; flex-wrap: wrap; }
  .alert-tab { padding: 4px 8px; font-size: 13px; }
  .alert-table thead th,
  .alert-table tbody td { padding: 8px 6px; font-size: 13px; }
  .modal-content { padding: 14px; }
  .field-name { width: 120px; }
}