/* CHANGE LOG
 * SEQ | AUTHOR | DESCRIPTION
 * 1 | maintainer@emeraldcoastsystemsgroup.com | Initial searchable structured log viewer styles.
 * 2 | maintainer@emeraldcoastsystemsgroup.com | Theme native administrator controls and preserve readable diagnostics on light surfaces.
 * 3 | maintainer@emeraldcoastsystemsgroup.com | Every colour comes from the portal theme tokens. The range chips, action buttons, borders, level pills, module names and links were white-based literals for a dark page, so under daylight the 15m/1h/6h/24h chips painted white on white (1.01:1) and the search fields had no visible edge; found by the kernel screens sweep under every theme.
 */

.logs-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  color: var(--text-primary, #e2e8f0);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ── Header ───────────────────────────────────── */

.logs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.logs-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logs-title i { margin-right: 8px; opacity: 0.7; }

/* ── Filters ──────────────────────────────────── */

.logs-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.logs-filter-group { display: flex; align-items: center; }

.logs-input,
.logs-select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary, #e2e8f0);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}

.logs-input:focus,
.logs-select:focus {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, transparent);
}

.logs-search { width: 160px; }
.logs-ticket { width: 120px; font-family: monospace; font-size: 11px; }
.logs-select { min-width: 100px; cursor: pointer; }

/* ── Range buttons ────────────────────────────── */

.logs-range-group {
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  padding: 2px;
}

.logs-range-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.logs-range-btn:hover { color: var(--text-primary); }
.logs-range-btn.active { color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 25%, transparent); }

/* ── Action buttons ───────────────────────────── */

.logs-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.logs-action-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.logs-action-btn:hover { color: var(--text-primary); border-color: var(--border-color-hover, var(--border-color)); }
.logs-action-btn.active { color: var(--accent-primary); border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent); }

/* ── Status bar ───────────────────────────────── */

.logs-status {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 24px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

/* ── Body ─────────────────────────────────────── */

.logs-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.logs-loading,
.logs-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Table rows ───────────────────────────────── */

.logs-table {
  font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
  font-size: 11.5px;
  line-height: 1.5;
}

.logs-row {
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.1s;
}

.logs-row:hover { background: var(--bg-card); }

.logs-row-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 24px;
  min-height: 28px;
}

.logs-time {
  color: var(--text-muted);
  font-size: 10.5px;
  flex-shrink: 0;
  min-width: 85px;
}

.logs-level {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}

.logs-level-debug { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.logs-level-info  { color: var(--status-active); background: color-mix(in srgb, var(--status-active) 14%, transparent); }
.logs-level-warn  { color: var(--status-warning); background: color-mix(in srgb, var(--status-warning) 14%, transparent); }
.logs-level-error { color: var(--status-error); background: color-mix(in srgb, var(--status-error) 15%, transparent); }
.logs-level-fatal { color: var(--status-error); background: color-mix(in srgb, var(--status-error) 25%, transparent); font-weight: 700; }
.logs-level-trace { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 8%, transparent); }

.logs-module {
  color: var(--accent-primary);
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-msg {
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Expanded detail ──────────────────────────── */

.logs-row-detail {
  display: none;
  padding: 8px 24px 12px 120px;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.logs-row.expanded .logs-row-detail {
  display: flex;
}

.logs-row.expanded {
  background: var(--bg-card);
}

.logs-detail-field {
  display: flex;
  gap: 6px;
  font-size: 11px;
  line-height: 1.6;
}

.logs-detail-key {
  color: var(--text-muted);
  flex-shrink: 0;
}

.logs-detail-key::after { content: ':'; }

.logs-detail-val {
  color: var(--text-secondary);
  word-break: break-all;
}

.logs-detail-ticket {
  color: var(--status-active);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--status-active) 30%, transparent);
}

.logs-detail-ticket:hover {
  text-decoration-color: color-mix(in srgb, var(--status-active) 70%, transparent);
}

/* ── Mobile (≤640px) ──────────────────────────── */

@media (max-width: 640px) {
  /* Reduce header padding so content fits 390px */
  .logs-header {
    padding: 10px 12px;
    gap: 8px;
  }

  /* Let filter inputs fill the row width */
  .logs-filters {
    width: 100%;
  }

  /* Prevent iOS auto-zoom on focus; let inputs stretch */
  .logs-input,
  .logs-select {
    font-size: 16px;
  }

  .logs-search {
    width: 100%;
    flex: 1 1 120px;
  }

  .logs-ticket {
    width: 100%;
    flex: 1 1 100px;
  }

  .logs-select {
    min-width: 80px;
  }

  /* Move actions off auto-margin so they wrap naturally */
  .logs-actions {
    margin-left: 0;
  }

  /* Reduce status bar side padding */
  .logs-status {
    padding: 4px 12px;
  }

  /* Reduce row padding and allow message to wrap */
  .logs-row-summary {
    padding: 6px 12px;
    flex-wrap: wrap;
    min-height: 36px;
  }

  .logs-msg {
    white-space: normal;
    word-break: break-word;
    flex-basis: 100%;
  }

  /* Collapse the deep left indent in expanded detail */
  .logs-row-detail {
    padding: 8px 12px 12px 12px;
  }
}

/* Runtime controls share the viewer's inherited light/dark theme. */
#loggingSettings { padding: 8px 24px; color: var(--text-primary, #e2e8f0); }
.logging-settings summary { cursor: pointer; font-size: 13px; }
.logging-settings-body { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 12px 0; }
.logging-settings-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.logging-settings-body label span, .logging-settings-body p { color: var(--text-secondary, #94a3b8); }
.logging-settings-body textarea { width: min(380px, 75vw); font-family: monospace; }
.logging-settings-body p { flex-basis: 100%; margin: 0; font-size: 12px; }
.logging-settings-body button:disabled { opacity: .5; cursor: wait; }
#loggingSettingsStatus { font-size: 12px; }
.logs-detail-ticket { border: 0; background: transparent; padding: 0; font: inherit; }
.logs-status, .logs-time, .logs-detail-key { color: var(--text-secondary, #94a3b8); }
.logs-msg, .logs-detail-val { color: var(--text-primary, #e2e8f0); }
.logs-empty { color: var(--text-secondary, #94a3b8); }
@media (max-width: 640px) { #loggingSettings { padding: 8px 12px; } }